flexbox行为不正常,最大高度

Question

我的问题可能最好用例子来解释.以下jsfiddle将在Chrome中运行:

http://jsfiddle.net/ga6g4/

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

max-height: 100px;

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

它打破了.现在似乎认为我的名单现在是零高度!知道为什么这是在做它正在做的事情,以及我如何解决它？

编辑:我在原帖中的描述性不足以说明我的行为方式.基本上外部应该只使用它所需的最小高度,但最多只能使用最大高度(由最大高度定义).此时,我希望内容开始滚动.

Answer 1

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

http://jsfiddle.net/vN65r/

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

flex: 0 0 auto;

以下是可变高度,滚动体:

flex: 0 1 auto;

我希望它对某人有所帮助

Answer 2

两者都给它max-height:100px;，height:100%;应该可以工作。http://jsfiddle.net/ga6g4/2/

Answer 3

我认为答案是您正在使用flex-direction:column.

尽管我仍然不完全清楚您想要实现的目标，但切换flex-direction:row似乎具有正确的效果。

JSfiddle 演示

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;
}