Overflow: auto без height/max-height

Question

[SnowElephant]

Пример: codepen.io/anon/pen/AaLBu (убрать height у .list)

Нужно, чтобы для .list без явного указания height срабатывал overflow, который ограничивается родительским контейнером (т.е. забрать свободное пространство, потом уже скролл).

Нужно это потому, что рядом может быть ещё несколько соседей типа .title, но считать каждый раз общую высоту и отнимать от 100% не хочется.

height: 100% считает, что нужно ввести себя так же, как height: inherit, а при height: auto блок просто вырывается за пределы родителя.

Может какие-то трюки есть или flexbox'ом можно?

Comments

[Евгений Низамиев]

Кажется я не очень понял вопроса. Но разве нельзя указать overflow для .container ?

[SnowElephant]

Нужно именно для .list, потому, что тайтл нужен быть виден всегда(и снизу могут быть всякие инфобары).

[quux]

А разделить на два дива, в одном тайтл, в другом контент. Но все равно для второго дива придется указывать высоту... Зато за родительский не будет ниче выходить. Компромис

Answer 1

[SnowElephant]

Вроде решил: codepen.io/anon/pen/LENBea
Используется flexbox и новое значение css3 width/height: fill-available
Работает только в webkit с префиксом.

Answer 2

[telegraphnij_stolb]

Нужно создать новый контекст форматирования блоков.

Это можно сделать как с помощью overflow: hidden, так и с помощью overflow-x hidden. Вот так в данном случае и нужно поступить для контейнера.

codepen.io/anon/pen/jECLF

Comments

[SnowElephant]

Не контейнер. Только для .list нужно. Чтобы .title оставался фиксирован вверху, а скролл был только у .list

[telegraphnij_stolb]

Ну глянь на пен, что я кинул. У листа есть скролл. А контейнеру нужно задать overflow-x: hidden, чтобы у листа работало height: auto и не выезжало за пределы контейнера.

[SnowElephant]

Вот ваш пен yadi.sk/d/tUUPFcBHQhKQQ
Скролл только у контейнера(2)

[telegraphnij_stolb]

извиняюсь, наверное от жары уже мозги сварились. Гугл и мысли вообще по этому поводу ничего не дали. Без js не обойтись. В js подход, как и в calc. Считается отступ от верхнего края родителя.

[SnowElephant]

Да, похоже, чисто сделать не получится... Хотя и задачка тривиальная, жаль в css не предусмотрели такого.