如何防止 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>

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

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

编辑： 如果我之前不清楚，问题是 .box 和 #right 元素不尊重父 #container[的 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。

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

How to prevent css grid column from exceeding max-height of the grid container?

html

css

overflow

css-grid