flexbox错误与最大高度 [英] 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错误与最大高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！