Запретить дочернему элементу увеличивать высоту родительского элемента, что основано на flex-grow [дубликат] ⇐ CSS

[Anonymous]

У меня есть родительский элемент с определенной высотой (например, 100vh) и display: flex; flex-direction: columns и несколько вложенных дочерних элементов, которые не имеют фиксированной высоты — вместо этого их высота основана на flex-grow: 1. Если я добавлю новый самый внутренний элемент с высотой, большей, чем его родительский элемент, то высота всех его предков изменится. Я хочу, чтобы новый элемент переполнял своего родителя, а не менял свою высоту.
Вот ссылка jsfiddle: https://jsfiddle.net/1o8khw7z/1/
Единственный способ заставить его работать — добавить overflow: auto ко всем элементам, которые находятся между верхним родителем и новым элементом (проверьте комментарии CSS в jsfiddle).
Имейте в виду, что я не могу использовать
Если имеется много вложенных элементов, это решение кажется немного громоздким. Есть ли лучший способ справиться с этим?

Подробнее здесь: https://stackoverflow.com/questions/794 ... n-flex-gro