Question

我有两个并排放置的容器，带有一个共同的页眉和页脚。一切都是通过新浏览器中提供的flex布局完成的（注意：我的代码使用的是webkit特定指令）。

问题是如果调整浏览器窗口大小，我无法在两个容器中显示滚动条。我得到的只是一个滚动所有内容的滚动条。怎么能做到这一点？

HTML很简单：

<html>
<body>
  <div class="container">
    <div class="search">Search bar</div>
    <div class="main">
      <div class="search-results vertical pane">
        <strong>Search results</strong>
        <ul>
          <li>Item</li>
          ...
          <li>Item</li>
        </ul>          
      </div>
      <div class="content vertical pane">
        <strong>Item</strong>
        <ul>
          <li>Item detail</li>
          ...
          <li>Item detail</li>
        </ul>          
      </div>
    </div>
    <div class="footer">
      <strong>Footer</strong>
    </div>
  </div>
</body>
</html>

CSS就在这里：

html, body {
  height: 100%;
}

.container {
  background-color: lightyellow;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-flex-flow: column;
  height: 100%;
}

.main  {
  background-color: lightgrey;
  -webkit-flex: 1;
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-flex-flow: row;
}

.vertical {
  overflow-y: auto;
}

.pane  {
  width: 50%;
}

.search {
  width: 100%;
  background-color: pink;
  -webkit-flex: 0.01;
}

.footer {
  width: 100%;
  background-color: yellow;
  -webkit-flex: 0.01;
}

.search-results {
  background-color: lightblue;
}

.content {
  background-color: lightgreen;
}

Answer 1

我认为你必须添加一个高度/最大高度，高于容器的内容。

例如：

.vertical {
  max-height: 200px;
  overflow-y: auto;
}

Demo

Answer 2

经过更多的研究，我发现main类是真正的罪魁祸首，添加min-height: 0会占用空间（这是一个黑客，但它似乎是一个非常广泛使用的黑客）。添加overflow-y: scroll使滚动条按预期工作。

JSBin here for Chrome 24

更新：在Chrome 32中效果更好。请参阅this JSBin。

滚动条无法显示在两个Flexbox容器中

2 个答案: