Автоматически уменьшать высоту дочернего элемента flexbox
Я хочу создать макет, который показывает несколько (например, 2) строк содержимого (в данном случае изображений), которые заполняют всю страницу (но имеют определенный максимальный размер). При изменении размера окна размер содержимого также должен изменяться таким образом, чтобы не появлялась полоса прокрутки или не обрезалось содержимое. Я попытался сделать это с помощью display: grid или display: flex в контейнере, но оба решения (ниже я опубликую только подход на основе flexbox) не работали полностью, но имели недостаток: при уменьшении ширины окна размер окна изображения также уменьшаются таким образом, чтобы они по-прежнему хорошо вписывались в страницу.
Однако при изменении высоты окна изображения не сжимаются и появляется полоса прокрутки. Чтобы быть точным, когда высота окна меньше 448 пикселей, то есть недостаточно вертикального пространства для размещения двух изображений высотой 224px, появляется вертикальная полоса прокрутки, тогда как я хочу, чтобы изображения уменьшились.
Я немного озадачен тем, что проблема проявляется не так, как для вертикальных, так и для горизонтальных изменений размера, поскольку код CSS выглядит «симметричным». Что мне здесь не хватает?
PS: Я также пробовал использовать min-height: 0 на блоках row-* в соответствии с это предложение, но, к сожалению, это ничего не изменило.
<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%
}
@StepUp Извините, мое описание было неточным, я расширил его сейчас. Чтобы быть точным: вертикальная полоса прокрутки появляется, когда размер окна меньше 448 пикселей (вдвое больше изображений). Однако в идеале никогда не должно быть полосы прокрутки, но содержимое должно сжиматься.
Что не работает? Я только что изменил размер вашего макета, и на нем нет полос прокрутки