Warum funktioniert die Objektanpassung in der Flexbox nicht?

Ich habe mehrere Spalten, die ich mit flex gleich breit mache. Jedes enthältimg Tags, und ich möchte, dass diese Bilder das @ aufweisobject-fit: cover Größe.

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  object-fit: cover;
}
<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

Die Größe der Bilder wird nicht geändert, wie in @ zu sehen isdiese Demo. Warum das

Antworten auf die Frage(6)

Ihre Antwort auf die Frage