为什么使用CSS显示:父元素的网格显示子元素的滚动条

Question

当内部div的内容很长并且需要显示滚动条时，滚动条不会显示，除非我在父级(.contator(上使用display:grid。

我知道我可以简单地将内部容器的高度设置为100%。但我的问题是，为什么将父显示设置为网格显示滚动条？有没有什么合适的方法可以在不设置内部容器高度的情况下显示滚动条？

.container {
display: grid;
grid-row: 2;
grid-column: 2;
height: 100px;
}
.inner-container {
overflow-style: auto;
overflow-y: scroll;
}

<div class="container">
<div class="inner-container">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>

Answer 1

grid和flex都会为您提供滚动条，原因类似，这是默认的拉伸对齐方式。由于这种对齐，inner-container将被拉伸到其父高度，所以这就像有了height:100%，然后因为overflow: scroll而有了滚动条

没有其他显示器可以做同样的事情，因为拉伸对齐只有使用flexbox和CSS网格才能退出。

如果你禁用它，它就不会发生：

.container {
display: grid;
grid-row: 2;
grid-column: 2;
height: 100px;
align-items:start;
}
.inner-container {
overflow-style: auto;
overflow-y: scroll;
}

<div class="container">
<div class="inner-container">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>