html - 溢出:隐藏无法按预期使用 Flexbox

Question

我正在尝试构建一个导航面板，它在顶部有一个固定高度的主导航栏，一个固定在屏幕底部的固定高度的辅助导航栏，以及一个填充剩余空间的容器可滚动，具体取决于内部元素列表的长度。

我正在学习使用 flexbox 并认为我可以使用 flex-grow 和 overflow: hidden 来完成这个，但是我遇到了一些麻烦。

Here's a fiddle

html,
body {
  height: 100%;
}

.container-main {
  display: flex;
  height: 100%;
  flex-flow: column;
}

.nav-bar {
  display: flex;
  height: 36px;
  background-color: grey;
}

.container-dd {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.dd-fill {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  background-color: green;
  overflow: hidden;
}

.dd-bot {
  display: flex;
  height: 100px;
}

<div class="container-main">
  <div class="nav-bar">top nav bar</div>
  <div class="container-dd">
    <div class="dd-fill">
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
    </div>
    <div class="dd-bot">sticky footer</div>
  </div>
</div>

从 fiddle 可以看出，div dd-fill 中放不下的内容是不可访问的，也没有滚动条。辅助导航栏的固定高度也没有被强制执行。有谁知道为什么它会这样？提前致谢。

Answer 1

您可以通过将 hidden 更改为 auto 并使用 min-height (我有时也会添加 max-height 以确保它不会在更大的屏幕上增长)而不是顶部和底部的高度来解决溢出问题:

html,
body {
  height: 100%;
  margin: 0;
}

.container-main {
  display: flex;
  height: 100%;
  flex-flow: column;
}

.nav-bar {
  display: flex;
  min-height: 36px;         /* use min-height */
  background-color: grey;
}

.container-dd {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.dd-fill {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  background-color: green;
  overflow: auto;            /* use auto so scrollbar appears */
}

.dd-bot {
  display: flex;
  min-height: 100px;       /* use min-height */
}

<div class="container-main">
  <div class="nav-bar">top nav bar</div>
  <div class="container-dd">
    <div class="dd-fill">
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
      <p>list item</p>
    </div>
    <div class="dd-bot">sticky footer</div>
  </div>
</div>