Question

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

正如你所看到的，我有一个固定高度的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 Demo

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

Answer 4

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>

它的窍门是flex-shrink-1，与上溢-y：自动配对。

flexbox行为不正常，最大高度

4 个答案: