为什么使用父元素的 CSS display:grid 显示子元素的滚动条？

Question

当内部div的内容很长并且需要显示滚动条时，滚动条不显示，除非我在父级（.container）上使用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>

为什么使用父元素的 CSS display:grid 显示子元素的滚动条？

Why using CSS display:grid of parent element shows a scroll bar for child element?

html

css

scrollbar