我的问题可能最好用例子来解释。以下jsfiddle将在Chrome中运行:
如你所见,我有一个固定高度的flexbox,它有一个固定的头部和一个可滚动的主体。到目前一切尚好。但是,如果您将'.lhs‘容器的'height’CSS更改为max-height:
max-height: 100px;
它会断掉。它现在似乎认为我的列表现在是零高度!你知道为什么它会这样做吗,以及我如何修复它?
编辑:在我最初的帖子中,我没有足够的描述性来描述我想要的行为。基本上,外部应该只使用它所需的最小高度,但只使用最大高度(由max- height定义)。此时,我希望内容开始滚动。
发布于 2014-04-08 02:08:50
好的,如果有人感兴趣,这是我最终的解决方案:
基本上,我必须将以下内容应用于固定高度的头部:
flex: 0 0 auto;
并将以下内容添加到可变高度的滚动主体中:
flex: 0 1 auto;
我希望它能帮助一些人
发布于 2014-04-07 22:15:29
同时使用max-height:100px;
和height:100%;
应该是可行的。http://jsfiddle.net/ga6g4/2/
发布于 2019-08-18 05:40:34
Barguast的回答很好。以下是使用Bootstrap的简化版本:
<div class="h-50 border border-danger">
<div class="d-flex flex-column h-100">
<header>Header</header>
<div class="flex-shrink-1" style="overflow-y: auto;">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<footer>Footer</footer>
</div>
</div>
它的诀窍是flex- it 1,与overflow-y: auto配对。
https://stackoverflow.com/questions/22914399
复制相似问题