I'm trying to make a responsive layout that maximizes the size of "top panel" while satisfying the following criteria.
- Card's height is equal to that of the viewport
- Card's width is equal to that of the top panel
- Top panel always has an aspect ratio of 3 / 2
- Bottom panel's height is at least 40% of the card's height
I have a solution, but it involves the use of a container query on an element devised solely for this purpose, which seems unnecessary.
: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);}<div id="sizer"><div id="card"><div id="top-panel"><div id="innermost"></div></div><div id="bottom-panel"></div></div></div>Is there a combination of flex properties to achieve the same outcome without using a container query?