CSS flexbox 与 max-height 的行为不端
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22914399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
flexbox misbehaving with max-height
提问by Barguast
My issue is probably best explained by example. This following jsfiddle will work in Chrome:
我的问题可能最好通过示例来解释。以下 jsfiddle 将在 Chrome 中工作：
As you can see, I've got a fixed-height flexbox with a fixed header and a scrollable body. So far so good. However, if you change the 'height' CSS of the '.lhs' container to max-height:
如您所见，我有一个固定高度的 flexbox，带有固定的标题和可滚动的主体。到现在为止还挺好。但是，如果您将 '.lhs' 容器的 'height' CSS 更改为 max-height：
max-height: 100px;
It breaks. It seems to now think that my list is now zero-height! Any idea why this is doing what it is doing, and how I can fix it?
它坏了。现在似乎认为我的列表现在为零高度！知道为什么这样做是在做什么，我该如何解决？
EDIT: I wasn't descriptive enough in my original post in how I want this to behave. Basically the outer should use only the minimum height it requires, but only up to a maximum (defined by max-height). At this point, I want the content to begin scrolling.
编辑：我在我的原始帖子中没有足够描述我希望它如何表现。基本上外部应该只使用它需要的最小高度，但最多只能使用最大值（由 max-height 定义）。此时，我希望内容开始滚动。
回答by Barguast
OK, here's the solution I ended up with if anyone is interested:
好的，如果有人感兴趣，这是我最终得到的解决方案：
Basically, I had to apply the following to the fixed-height header:
基本上，我必须将以下内容应用于固定高度的标题：
flex: 0 0 auto;
And the following to the variable-height, scrolling body:
以下是可变高度的滚动体：
flex: 0 1 auto;
I hope it helps somebody
我希望它可以帮助某人
回答by vaskort
Giving it both max-height:100px;and height:100%;should work. http://jsfiddle.net/ga6g4/2/
两者都给它max-height:100px;，height:100%;应该可以工作。http://jsfiddle.net/ga6g4/2/
回答by Paulie_D
I think the answer is that you are using flex-direction:column.
我认为答案是您正在使用flex-direction:column.
Although it's still not entirely clear to me what you are trying to achieve switching to flex-direction:rowseems to have the right effect.
虽然我仍然不完全清楚你想要实现的切换flex-direction:row似乎有正确的效果。
CSS
CSS
.lhs {
position: absolute;
top: 8px;
left: 8px;
width: 250px;
max-height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
}
.panel-container {
flex: 1;
overflow: auto;
}
回答by ccleve
Barguast's answer is a good one. Here is a simplified version using Bootstrap:
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>
The trick to it is the flex-shrink-1, paired with overflow-y: auto.
它的诀窍是 flex-shrink-1，搭配overflow-y: auto。
