Создайте родительский див с детьми Div, которые вертикально выровнены с дном родителей, когда высота не определяется ⇐ CSS

[Anonymous]

Есть родительский див с двумя детьми внутри. Каждый из них содержит немного текста. Мы знаем, что мин-высоты из внутренних элементов, также известный, также известен. Также по какой -то причине я не могу использовать Flex или Grid, не могу использовать «Display: Table» и не могу установить последний внутренний элемент с «позицией: абсолютно» (потому что в этом случае мы не можем сделать высоту родителя, равную сумме внутренних высот Divs), а также нет JS. Но мы можем использовать CSS CALC и VARS, и мы можем создать некоторые псевдо-элементы. < /P>
Задача состоит в том, чтобы вертикально выровнять вниз внутреннего содержания-и высота родителя должна расти, если внутреннее содержание становится больше, чем мин-высота родителя. Эта вертикальная согласованная до нижней работы, когда мы устанавливаем высоту родителя в пикселях, но не работает, когда она не установлена. < /P>
Есть идеи?

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

.inner {
display: inline-block;
vertical-align: bottom;
background: yellow;
height: min-content;
padding-top: 10px;
min-height: 30px;
width: 200px;
}

.block {
background: orange;
/* it works with fixed height in pixels, but does not work when height is set to min-content or auto */
/* height: 180px;*/
height: min-content;
min-height: 180px;
width: 200px;
display:inline-block;
}

/* Fake (pseudo) element, that enables vertical-align */
.block:before {
content: "";
display: inline-block;
vertical-align: bottom;
height: 100%;
}< /code>

Inline-Block
Inline-Block

Так что моя цель:

advelice antfully: not vurselc. браузеров, но также и старше, таких как все еще популярный Firefox 115.23 и Chrome 109.

Подробнее здесь: https://stackoverflow.com/questions/796 ... arents-bot