flexbox错误与最大高度 [英] flexbox misbehaving with max-height
问题描述
我的问题可能最好由例子解释。以下jsfiddle将在Chrome中正常运行:
My issue is probably best explained by example. This following jsfiddle will work in Chrome:
如你所见,我有一个固定高度的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;
打破。看来现在认为我的列表现在是零高度!任何想法为什么这是做它正在做什么,以及我如何可以解决它?
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:
基本上,我必须将以下内容应用到固定高度的标题:
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屋!