flexbox 与 max-height 的行为不端 [英] flexbox misbehaving with max-height

问题描述

我的问题可能最好通过示例来解释.以下 jsfiddle 将在 Chrome 中工作:

My issue is probably best explained by example. This following jsfiddle will work in Chrome:

http://jsfiddle.net/ga6g4/

如你所见，我有一个固定高度的 flexbox，它有一个固定的标题和一个可滚动的主体.到现在为止还挺好.但是，如果您将 '.lhs' 容器的 'height' CSS 更改为 max-height:

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:

max-height: 100px;

http://jsfiddle.net/ga6g4/1/

它坏了.现在似乎认为我的列表现在为零高度！知道为什么要这样做吗，我该如何解决?

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?

我在我的原始帖子中没有足够描述我希望它如何表现.基本上外部应该只使用它需要的最小高度，但最多只能使用最大值(由 max-height 定义).此时，我希望内容开始滚动.

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.

推荐答案

好的，如果有人感兴趣，这是我最终得到的解决方案:

OK, here's the solution I ended up with if anyone is interested:

http://jsfiddle.net/vN65r/

基本上，我必须将以下内容应用于固定高度的标题:

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;

希望对大家有所帮助

这篇关于flexbox 与 max-height 的行为不端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！