Question

在设计网格时，我观察到了一个无法解释的特性，或者在网格规范中找到了明确的原因。考虑具有嵌套网格的布局，父网格具有行，高度以fr个单位定义。此灵活尺寸的行包含子网格，该子网格包含一行基于百分比的高度（例如100%）。此行包含一个content单元格，其中可能有很多内容可能会溢出，因此我们需要显示此content单元格的滚动条。

要使content单元格具有滚动条，我发现自己不仅需要向内容单元格添加overflow: auto属性，还需要向child-grid单元格添加{{1 }} div的父级）。没有其他办法可以给我一个可滚动的div。

我尝试过的其他一些事情： 1.在内容单元格上设置content无效。我认为这可能是因为父网格的行大小为height: 100%，所以高度是动态计算的（有点像height：auto），因此任何子div都不能使用基于百分比的高度。 2.在fr上设置max-height属性。在逻辑上感觉正确，它将仅计算父网格的高度，而不会将其溢出。但这甚至行不通。

我做了一个小例子来说明我的意思：

https://codepen.io/kumarharsh/pen/qQmwQB

child-grid

.parent-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 100%;
  height: 100px;
  border: 2px solid #f00;
}
.child-grid {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  background-color: red;
  overflow: auto;
}
.content {
  background-color: grey;
  overflow: auto;
}
.no-overflow-auto {
  overflow: initial;
}
.height-100 {
  height: 100%;
}
.max-height-100 {
  max-height: 100%;
}

.data {
  padding: 1em;
}
p {
  background-color: #ccc;
  padding: 1em;
  margin-top: 0;
}

所有网格都完全相同，但是第二个网格没有将<div class="parent-grid"> <div class="child-grid"> <div class="content"> <div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div> </div> </div> </div> <p>What I'm trying to achieve. All lorem ipsum should be bound by the grey box and red border</p> <div class="parent-grid"> <div class="child-grid"> <div class="content no-overflow-auto"> <div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div> </div> </div> </div> <p>lorem ipsum exceeds the grey box but not the border (content - overflow:initial)</p> <div class="parent-grid"> <div class="child-grid no-overflow-auto"> <div class="content"><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div> </div> </div> </div> <p>lorem ipsum exceeds the grey box and red border (child-grid - overflow:initial)</p> <div class="parent-grid"> <div class="child-grid no-overflow-auto max-height-100"> <div class="content"> <div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div> </div> </div> </div> <p>Child-grid - max-height:100%</p> <div class="parent-grid"> <div class="child-grid no-overflow-auto max-height-100"> <div class="content height-100"> <div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div><div class="data">A</div> </div> </div> </div> <p>Content - height:100%</p>应用于内容单元，第三个网格在子网格上没有overflow:auto，第四个已将overflow:auto应用于height:100% div，最后一个已将content应用于max-height:100%。

因此，感觉像是child-grid子网格正要为overflow:auto div强制设置一个确定的高度，以便出现滚动条。但这只是一个推测。

有人可以解释为什么在这种布局的content和overflow:auto上都必须指定child-grid吗？

在具有灵活行的嵌套网格布局中，为什么我需要两个`overflow：auto`滚动条

0 个答案: