I want to create a layout that shows multiple (e.g., 2) rows of content (in this case images) that fill the entire page (but have a certain maximum size). Whenever the window is resized, the content should also be resized such that no scrollbar appears or content is cut off. I tried to do this with display: grid or display: flex on the container but both solutions (I'll only post the flexbox-based approach below) did not completely work but had a flaw: When the width of the window is decreased, the size of the images is also decreased such that they still nicely fit the page.
However, when the height of the window is changed the images do not shrink and a scrollbar appears. To be precise, when the window's height is smaller than 448px, i.e. there is not enough vertical space to fit two images of height 224px, a vertical scrollbar appears whereas I want the images to shrink.
I'm a bit puzzled that the problem does not behave in the same way for vertical as it does for horizontal size changes since the CSS code looks "symmetrical". What am I missing here?
PS: I also tried to use min-height: 0 on the row-* divs according to this suggestion, but sadly that did not change anything.
<body>
<div id="container">
<div id="row-1">
<img src="https://via.placeholder.com/224" />
<img src="https://via.placeholder.com/224" />
<img src="https://via.placeholder.com/224" />
<img src="https://via.placeholder.com/224" />
</div>
<div id="row-2">
<img src="https://via.placeholder.com/224" />
</div>
</div>
</body>
img {
max-width: 224px;
max-height: 224px;
height: 100%;
width: 100%;
object-fit: cover;
}
#row-1 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
#container {
display: flex;
flex-direction: column;
align-items: center;
}
body {
margin: 0px;
height: 100%;
width: 100%
}
