html - 如何防止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的容器，因此.box的overflow属性不会被触发，内容会被缩短。

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

Answer 1

问题并不在于最大高度。它是 .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。