Как сделать так, чтобы столбец .flex-grow не расширялся для размещения его содержимого? ⇐ CSS

[Anonymous]

У меня есть этот код в приложении, использующем Tailwind CSS.

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

Поскольку основной контейнер моего приложения имеет определенную высоту (.h-экран), когда часть MAIN CONTENT пуста или имеет мало содержимого, div .grow правильно увеличивается, занимая оставшееся доступное пространство.
Чего я не понимаю, так это того, что, поскольку браузер, очевидно, знает, сколько места осталось, почему div .grow продолжает расти, когда контент переполняется, вместо того, чтобы отдавать мне полосу прокрутки?
Я попробовал несколько комбинаций flex, flex-shrink, flex-grow, flex-1, скоро единственным вариантом, который у меня будет, будет специально указать приложению, как большими должны быть верхние элементы div, а затем вычислять оставшееся пространство, но flex специально разработан, чтобы больше не делать этого. Элемент div .grow уже знает, какую высоту он должен иметь. Как мы можем зафиксировать его на этой высоте, даже если высота его содержимого станет больше?

Подробнее здесь: https://stackoverflow.com/questions/787 ... ts-content