<分区>
<分区>
我正在尝试使用 CSS Flexbox (display: flex) 来占据窗口的剩余高度。我也想要滚动可用...也许我一直在做这个错误，但一直在寻找其他选项已经让我望而却步。
想法是有一个固定的容器。在那个固定容器内是一个 flexbox，它占据了 100% 的高度。我将元素添加到堆叠在一列中的 flexbox 中。我添加的最后一项(容器包装器)内部有动态内容，将通过 AJAX 调用替换 HTML(否则我只需将操作栏移到包装器外并完成它)。这个内容包装器也是一个 flex 容器(以及一个 flex 元素)，并设置为随着窗口的高度增长和收缩。这个 flex 容器的最后一项应该允许在窗口缩小时滚动。
<!-- The fixed container -->
<div class="fixed">
<!-- The first flex container - direction: column -->
<div class="outer">
<div class="some-flex-item"></div>
<div class="some-flex-item"></div>
<!-- Grow and shrink with 100% of height -->
<div class="container-wrapper">
<!-- inner HTML is dynamic -->
<!-- flex: 0 0 auto -->
<div class="action-bar"></div>
<!-- Want this div to take up remaining height of window
and have overflow-y scrolling -->
<div class="container">
...
</div>
</div>
</div>
</div>
似乎在 IE 10+、Chrome 中工作，但 Firefox 没有添加滚动条，因为 container-wrapper 的高度由于内部内容而无限增长。我应该提一下，旧版本的 Firefox 可以正确显示(我认为是 ~33)，但更新版本则不能。
我找到了一个变通方法，我将内部容器设置为 position: relative ，然后将其内部内容包装在一个 div 中，并将绝对定位设置为 0(顶部、左侧、底部、右侧)。 Example here .我不喜欢这样，因为它似乎违背了 flexbox 布局的目的。有什么方法可以让这个概念在浏览器中很好地发挥作用，而无需进行标记修改？
最佳答案
添加这个:
.container-wrapper {
min-height: 0;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
margin: 0;
height: 100%;
}
.fixed {
position: fixed;
top: 60px;
right: 0;
bottom: 0;
width: 100%;
max-width: 400px;
}
.outer {
border: 1px solid black;
height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
.outer > * {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.container-wrapper {
-ms-flex: 1 1 100%;
flex: 1 1 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-height: 0;
}
.action-bar {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
padding: 20px;
text-align: right;
}
.container {
-ms-flex: 1 1 100%;
flex: 1 1 100%;
overflow-y: auto;
}
.list {
display: -ms-flexbox;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid aqua;
}
.display-name {
-ms-flex: 1 1 100%;
flex: 1 1 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 8px;
}
.display-date {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}<div class="fixed">
<div class="outer">
<div>
<p>Title</p>
</div>
<!-- The inner contents of container-wrapper is dynamic so I cannot
simply move the action-bar item outside -->
<div class="container-wrapper">
<div class="action-bar">
<button>I don't do anything but occupy space</button>
</div>
<!-- Firefox allows this element to grow beyond the remaining space of the container-wrapper
thus expanding the height of the container-wrapper and not allowing scroll -->
<div class="container">
<div class="list">
<div class="display-name">
Display Name
</div>
<div class="display-date">
Mar 31, 2015
</div>
</div>
<div class="list">
<div class="display-name">
Really long name that should be truncated. I don't know
</div>
<div class="display-date">
Mar 31, 2015
</div>
</div>
<div class="list">
<div class="display-name">
Display Name
</div>
<div class="display-date">
Mar 31, 2015
</div>
</div>
<div class="list">
<div class="display-name">
Display Name
</div>
<div class="display-date">
Mar 31, 2015
</div>
</div>
<div class="list">
<div class="display-name">
Display Name
</div>
<div class="display-date">
Mar 31, 2015
</div>
</div>
</div>
</div>
</div>
</div>你需要它，因为 Flexbox 模块改变了 min-height 的初始值:
4.5 Implied Minimum Size of Flex Items
To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.
关于Firefox v36 及更高版本中的 CSS Flexbox 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29398259/