This layout is what I am aiming for:
While I can achieve a fixed aspect ratio with a 16:9 image by setting the img width to 100%, I run into an issue where the height scaling of flexbox becomes non-responsive. The height remains constant, and only the first row adjusts its height when resizing the window. The second row overflows and does not change in height whatsoever. In an attempt to address this, I experimented with adding a third div in the middle to occupy any remaining space when the viewport height decreases. This adjustment would make both image1 and image2 smaller while expanding the middle div.
My inquiry is as follows: Is it feasible to accomplish this using flexbox, or should I resort to utilizing css grid or javascript?
HTML:
<div id="container">
<div id="row1">
<div id="panel1"></div>
<div id="panel2"></div>
</div>
<div id="row2">
<div id="panel3">
<img/>
</div>
<div id="panel4"></div>
<div id="panel5">
<img/>
</div>
</div>
CSS:
#container {
height: 100vh;
width: 100vw;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#row1 {
display: flex;
flex-wrap: wrap;
flex: 2;
gap: 7px;
width: 100%;
padding: 7px;
}
#row2 {
display: flex;
flex-flow: row nowrap;
flex: 1;
gap: 7px;
width: 100%;
padding: 0 7px 7px 7px;
}
#panel1 {
background: white;
flex: 1;
}
#panel2 {
background: white;
width: 100px;
}
#panel3 {
background: white;
flex: 1;
}
#panel4 {
background: white;
flex: 1;
}
#panel5 {
background: white;
flex: 1;
}
#image1 {
width: 100%;
}