Flex-контейнер работает по-разному в разных браузерах? ⇐ Html

[Anonymous]

Я делаю сайт. Существует часть контента определенной ширины. Внутри находятся флексбоксы с изображением. Количество изображений может быть разным (не более 5), а ширина каждого изображения должна быть рассчитана так, чтобы вместить их все.
Странно, что в FireFox это работает нормально, а в Chrome или Яндекс.
Похоже, что изображения не подгоняются автоматически во flex-box, из-за высоты: 400 пикселей; ширина: 100% пытается соответствовать этому Высота 400 пикселей.
Вот части HTML и CSS:
HTML

Код: Выделить всё

[img]../images/newsImages/img_6_4.jpg[/img]
[img]../images/newsImages/img_6_5.jpg[/img]
[img]../images/newsImages/img_6_6.jpg[/img]
[img]../images/newsImages/img_6_9.jpg[/img]

CSS

Код: Выделить всё

.article-images {
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 20px;
width: 100%
}
.article-images-item {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 2px;
cursor: pointer
}

Как это должно быть (актуально в FireFox):


Как это выглядит сейчас (в Chrome или другом браузере)



Подробнее здесь: https://stackoverflow.com/questions/753 ... t-browsers