防止CSS网格子级从父级扩展

Question

我有以下CSS

html,body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.one {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20%;
}

.two {
  background: red;
}

.three {
  background: blue;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 58px;
}

.five {
  background: orange;
  height: 800px;
  overflow-y: auto;
}

.four {
  background: green;
}

.size {
  background: blue;
}

<div class="one">
  <div class="two">
  </div>
  <div class="three">
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
  </div>
</div>

现在您可以从https://codepen.io/dubcanada/pen/ZEbYBex中看到边栏，如果五个高，则三个高-122px（64 + 58px），它将扩大三个的高度以适应。我希望它添加滚动条而不扩展高度。

我已经尝试过min-height: 0;, max-height: 0; min-width: 0; max-width: 0;技巧，但我能想到的一切我都不确定如何解决。

有什么想法吗？

Answer 1

不确定要实现的目标...

这是我的最佳猜测：

html,body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.one {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20%;
  grid-template-rows: minmax(0, 1fr);
}

.two {
  background: red;
}

.three {
  background: blue;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 58px;
  max-height: 100%;
}

.five {
  background: orange;
  height: 500px;
  overflow-y: auto;
  max-height: 100%;
}

.four {
  background: green;
}

.size {
  background: blue;
}

<div class="one">
  <div class="two">2
  </div>
  <div class="three">
    <div class="four">4</div>
    <div class="five">5</div>
    <div class="six">6</div>
  </div>
</div>

Answer 2

您将为此需要一个额外的包装：

html,body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.one {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20%;
}

.two {
  background: red;
}

.three {
  background: blue;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 58px;
  min-height:0; /* added this too */
}

.five {
  background: orange;
  overflow-y: auto;
}
.five >div {
  height: 800px;
}

.four {
  background: green;
}

.size {
  background: blue;
}

<div class="one">
  <div class="two">
  </div>
  <div class="three">
    <div class="four"></div>
    <div class="five"><div></div></div>
    <div class="six"></div>
  </div>
</div>

Answer 3

您缺少代码中的重要内容。这是您所拥有的：

.five {
  background: orange;
  height: 800px;
  overflow-y: auto;
}

<div class="three">
   <div class="four"></div>
   <div class="five"></div>
   <div class="six"></div>
</div>

overflow属性定义当其内容太大而无法容纳时的元素行为。

因此，您的当前设置将无效，因为overflow不包含任何内容，并且.five从未生效。将overflow应用于height: 800px的内容。

此外，请记住，默认情况下为.five。这就是为什么在较高级别的容器上具有滚动条的原因。您可以使用grid items cannot be smaller than their content上的min-height: 0覆盖此默认值，这是.three中的网格项。