Как избежать циклической зависимости без запроса к контейнеру? ⇐ Html

[Anonymous]

Я пытаюсь создать адаптивный макет, который максимально увеличивает размер «верхней панели», одновременно удовлетворяя следующим критериям.

• Высота карточки равна высоте области просмотра
• Ширина карточки равна ширине верхней панели
• Соотношение сторон верхней панели всегда составляет 3/2
• Высота нижней панели составляет не менее 40 % от высоты карточки.

Это оказывается на удивление сложно, и я не совсем удовлетворен найденным решением.
Оно предполагает использование контейнерного запроса к элементу, созданному исключительно для этой цели, что кажется ненужным.

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

:root {
--desired-aspect-ratio: 3 / 2;
--bottom-panel-min-height: 40%;
}

body {
margin: 0;
width: 100vw;
height: 100vh;
}

#sizer {
aspect-ratio: var(--desired-aspect-ratio);
max-height: calc(100% - var(--bottom-panel-min-height));
container-type: inline-size;
}

#card {
width: 100cqw;
height: 100%;

display: flex;
flex-direction: column;

position: absolute;
margin: auto;
inset: 0;
}

#innermost {
background-color: pink;
aspect-ratio: var(--desired-aspect-ratio);
width: auto;
}

#bottom-panel {
background-color: rgb(110, 110, 110);
flex: 1;
min-height: var(--bottom-panel-min-height);
}

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

Мне нравится думать, что существует простая комбинация гибких свойств для достижения того же результата, но я еще не нашел ее. Какой способ лучше?

Подробнее здесь: https://stackoverflow.com/questions/798 ... iner-query