Контент во всю оставшуюся высоту?

Question

[lavezzi1]

Есть довольно типичная админка. https://imgur.com/a/hKJK7Ez

Есть навигация вверху и какой то контент. Контент как и везде обернут в несколько дивов, в котором как правило, ограничивается ширина, выравнивается по центру и прочие обертки которые нужны для библиотеки (vue). Вопрос, как растянуть контент во всю оставшуюся высоту? Конечно можно на каждую обертку вещать flex и flex grow на ребенке, но это будет дико не красиво. Есть какие то красивые альтернативы?

Answer 1

[Арсений Матыцин]

В вопросе ответ: flex-grow. Но судя по постановке вопроса, у тебя с этим плохо, так как ничего сверхсложного и некрасивого в этом нет.

В качестве альтернативы можно использовать calc(100vh - [headerheight]), которое необходимо модифицировать под существующие условия, но корректно будет работать только, если шапка фиксированная, в противном случае необходимо задействовать JS.

И чем дальше, чем хуже относительно максимально корректной реализации на флексах.

Answer 2

[Ankhena]

Либо flex-grow. Не понятно, почему вы его боитесь.
Либо гридами
grid-template-rows: min-content 1fr;