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%;
     ...

Div溢出滚动在Chrome中无效

1 个答案: