使用最大高度的flexbox异常行为
使用最大高度的flexbox异常行为
提问于 2014-04-07 21:48:26
我的问题可能最好用例子来解释。以下jsfiddle将在Chrome中运行：
如你所见，我有一个固定高度的flexbox，它有一个固定的头部和一个可滚动的主体。到目前一切尚好。但是，如果您将'.lhs‘容器的'height’CSS更改为max-height：
max-height: 100px;它会断掉。它现在似乎认为我的列表现在是零高度！你知道为什么它会这样做吗，以及我如何修复它？
编辑:在我最初的帖子中，我没有足够的描述性来描述我想要的行为。基本上，外部应该只使用它所需的最小高度，但只使用最大高度(由max- height定义)。此时，我希望内容开始滚动。
回答 3
Stack Overflow用户
发布于 2014-04-08 02:08:50
好的，如果有人感兴趣，这是我最终的解决方案：
基本上，我必须将以下内容应用于固定高度的头部：
flex: 0 0 auto;并将以下内容添加到可变高度的滚动主体中：
flex: 0 1 auto;我希望它能帮助一些人
Stack Overflow用户
发布于 2014-04-07 22:15:29
同时使用max-height:100px;和height:100%;应该是可行的。http://jsfiddle.net/ga6g4/2/
Stack Overflow用户
发布于 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配对。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22914399
复制相关文章
相似问题