Элемент не будет занимать оставшуюся высоту ⇐ CSS

[Anonymous]

Я пытаюсь заставить main и div#undermain занять оставшуюся высоту макета, но они этого не делают. Вот HTML (с использованием служебных классов Tailwind):

Код: Выделить всё

[img]./someurl.svg[/img]
Delivert




sign in

Я знаю, что flexbox — это простой способ решения такой проблемы, но единственное, что я пробовал, это сработало:

• задайте самый высокий элемент div (тот, который находится справа под телом) display: flex и flex-direction: columns
• дать main flex-grow: 1 и display: flex
• удалить высоту: 100% из # undermain

Но мне кажется, что это решение странное и не CSS-y.
Вот песочница.

Подробнее здесь: https://stackoverflow.com/questions/762 ... ing-height