Использование CSS Flexbox для позиционирования блоков на странице

[@MooNDeaR]

CSS — это просто, а главное — интуитивно понятно!

[@ScorpAL]

Не хватает заголовка "Где это работает".

Почему все так стесняются протестировать в нескольких браузерах и честно написать что работает в таком и таком браузере, но не работает в таком и таком?

[@DarthVictor]

Давайте поможем автору в этом.
Работает в:

• Chrome 53.0.2785.143
• IE 11.321.14393.0
• Microsoft EdgeHTML 14.14393, Microsoft Edge 38.14393.0.0
• Firefox 43.0.1
• Эмулятор Хрома для мобилок

[@EvgenyMakhnovets]

Спасибо, забыл об этом в статье.
P.S. если использовать префиксы, то работает и в IE 10. Ну то есть все современные браузеры поддерживаются

[@shlangus]

Я не уверен что правильно понял описание задачи, но вот это похоже на то, что вы сделали, только без 2 лишних блоков.

[@EvgenyMakhnovets]

В данном случае, если уменьшить контент в нижнем блоке он автоматически не уменьшится по величине

[@shlangus]

Этот случай вы изобразили на правой картинке? Из-за элипсиса я не сообразил к чему она. Позвольте ещё одну попытку.

[@ysegorov]

чуть проще можно сделать

[@EvgenyMakhnovets]

Та же проблема, что и в предыдущем комментарии

[@Serator]

@EvgenyMakhnovets Уже много раз писал (не конкретно вам, а вообще), но толку все равно нет. Забудьте о свойстве flex. Пишите все раздельно. Тогда и про "растягивается", "жадность" и прочие недоразумения писать не нужно будет, так как об этом скажет ваш код, а не набор непонятных 0 0 auto и т.п.

И вот, кстати, решение задачи из статьи, только без горы мусора и с читаемым CSS'ом: https://jsbin.com/gajozaj/5/edit?html,css,output.

[@EvgenyMakhnovets]

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

[@pepelsbey]

Вы же понимаете, что у вас в CSS будет чудовищный селектор .container .first-child .first-content? Не нужна это вложенность здесь, да нигде она не нужна. Думайте иногда о том, что выдаёт вам Sass.

[@EvgenyMakhnovets]

Да, косяк мой, но статья не совсем об этом)