ARTICLE AD BOX
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 heightThis is proving surprisingly difficult and I'm not entirely satisfied with the solution I found. 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>
I like to think there exists a simple combination of flex properties to achieve the same outcome, but I have yet to find it. What is a better way?
