html - Div 溢出滚动在 Chrome 中不起作用

Question

我制作了一个 div 布局，它在所有浏览器(尚未测试 Safari)但不是 Chrome(!？)中完全符合我的要求。

HTML:

<div class="app-wrapper">
  <div class="page-header">
    header
  </div>
  <div class="page-content">
    <div class="component-container">
      <div class="list-container">
        <!-- lots of list items -->
      </div>
      <div class="content-container">
        <!-- lots of content -->
      </div>
    </div>
  </div>
</div>

CSS:

.app-wrapper
  height: 100%
  display: flex
  flex-direction: column

.page-header
  flex: 0 0 auto
  height: 80px

.page-content
  flex: 1 1 auto
  position: relative
  overflow: auto

.component-container
  display: flex
  height: 100%

.list-container
  height: 100%
  overflow: auto

.content-container
  width: 100%
  height: 100%
  overflow: auto

Here is a CodePen

有什么问题吗？我该怎么做才能使列表(黄色)和内容(绿色)像所有其他浏览器一样拥有自己的溢出滚动条？

谢谢!

Answer 1

为页面内容指定一个特定的高度，否则其子项将占满浏览器的 100% 高度。

.page-content {
     height: 100%;
     ...