小编Wea*_*ian的帖子

溢出：隐藏的 Flexbox 未按预期工作

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

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

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;
}

Run Code Online (Sandbox Code Playgroud)

<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> …

Run Code Online (Sandbox Code Playgroud)

html css overflow flexbox flex-grow

Wea*_*ian

2018 08-01

5
推荐指数

1
解决办法

4501
查看次数