Flexbox неправильная работа с максимальной высотой

Моя проблема, вероятно, лучше всего объясняется примером. Этот следующий jsfiddle будет работать в Chrome:

Как вы можете видеть, у меня есть фиксированная высота flexbox с фиксированным заголовком и прокручиваемым телом. Все идет нормально. Однако, если вы измените "высоту" CSS контейнера ".lhs" на max-height:

max-height: 100px;

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

Это ломается. Кажется, теперь думаю, что мой список теперь нулевой высоты! Любая идея, почему это делает то, что она делает, и как я могу это исправить?

EDIT: В моем первоначальном посте я недостаточно описал, как мне это нужно. В основном внешний должен использовать только минимальную высоту, которую он требует, но только до максимума (определяется максимальной высотой). На этом этапе я хочу, чтобы содержимое начиналось с прокрутки.

Ответ 1

ОК, вот решение, с которым я столкнулся, если кому-то интересно:

http://jsfiddle.net/vN65r/

В принципе, мне пришлось применить следующее к заголовку с фиксированной высотой:

flex: 0 0 auto;

И следующее к переменной-высоте, прокручивающему телу:

flex: 0 1 auto;

Я надеюсь, что это поможет кому-то

Ответ 2

Предоставление как max-height:100px;, так и height:100%; должно работать. http://jsfiddle.net/ga6g4/2/

Ответ 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;
}

Ответ 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 в сочетании с overflow-y: auto.