Funktioniert der Flex-Container in verschiedenen Browsern unterschiedlich? ⇐ HTML

[Anonymous]

Ich erstelle eine Website. Es gibt einen Inhaltsteil mit einer bestimmten Breite. Im Inneren befinden sich Flexboxen mit Bild. Die Anzahl der Bilder kann unterschiedlich sein (nicht mehr als 5) und die Breite jedes Bildes muss so berechnet werden, dass sie auf alle passt.
Das Seltsame ist, dass dies in Firefox gut funktioniert, in Chrome oder Yandex jedoch.
Es scheint, dass Bilder aufgrund der Höhe von 400 Pixel nicht automatisch in die Flex-Box passen; die Breite: 100 % versucht, dem zu entsprechen 400px Höhe.
Hier sind HTML- und CSS-Teile:
HTML

Code: Select all

[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

Code: Select all

.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
}

So sollte es sein (aktuell in Firefox):


Wie es jetzt aussieht (in Chrome oder einem anderen Browser)