如何防止css网格列超过网格容器的最大高度？

Question

我的 CSS 网格布局如下：https://codepen.io/anon/pen/KogEaq

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #222525;
  color: white;
}

#container {
  display: grid;
  grid-template-columns: 27fr 78fr;
  max-height: 100vh;
}

#left {
  grid-row: 1;
  grid-column: 1;
}

#right {
  grid-row: 1;
  grid-column: 2;
  max-height: 100%;
}

.box {
  margin: 8px;
  padding: 8px;
  border-radius: 10px;
  border: blue solid 2px;
  overflow-y: auto;
  max-height: 100%;
}

<div id="container">
  <div id="left">
    <div class="box">
      Navigation sidebar stuff here
    </div>
  </div>
  <div id="right">
    <div class="box">
      Page content
    </div>
  </div>
</div>

该页面旨在成为单页应用程序，并且正文不应滚动。 当页面内容变大时，我希望.box类中的内容滚动。

问题是，#container 网格中的.box 和父#right 列似乎超过了100vh 容器设置的最大高度，因此@987654330 的overflow 属性@没有被触发，内容被删减。

编辑： 如果我之前不清楚，问题是 .box 和 #right 元素不尊重导致滚动问题的父 max-height 的 max-height 属性。

Answer 1

问题不在于max-height。它是 .box 元素 (margin: 8px) 的顶部和底部边距。添加到max-height: 100vh 时，会导致错误容器溢出。如果您删除这些边距并添加 box-sizing: border-box（以考虑边框和填充），您的页面和 overflow 将按预期工作。

body {
  margin: 0;
  background-color: #222525;
  color: white;
}

#container {
  display: grid;
  grid-template-columns: 27fr 78fr;
}

#left {
  grid-row: 1;
  grid-column: 1
}

#right {
  grid-row: 1;
  grid-column: 2;
}

.box {
  /* margin: 8px; */
  padding: 8px;
  border-radius: 10px;
  border: aqua solid 5px;
  max-height: 100vh;
  overflow: auto;
}

li {
  margin: 10px;
}

* { box-sizing: border-box; }

<div id="container">
  <div id="left">
    <div class="box">Navigation sidebar stuff here</div>
  </div>
  <div id="right">
    <div class="box">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
      </ul>
    </div>
  </div>
</div>

作为一种解决方案，请尝试在父元素（#right 和 #left）上使用 padding: 8px。