flexbox breaking line instead of printing in a row

November 9, 2022

I have a normal, easy flexbox layout. I try to show two elements per row. There is enough width for 2 elements. But strangely, every element gets one whole row. I don’t know why. Here is my code:

gallery.html:

<div class="container" *ngFor="let imageOrFile of imagesAndFiles">
  <div class="image">
    <dispo-einsatz-dokumente-gallery-image-item
      [image]="imageOrFile"
    ></dispo-einsatz-dokumente-gallery-image-item>
  </div>
</div>

gallery.scss:

.container {
  display: flex;
  flex-direction: row;
}

.image {
  width: 40%;
  height: 200px;
}

And the child component html:

<p>{{ image.name }}</p>

This is the result:

Why is it like this? How do I get my two elements in one row?

>Solution :

move the for loop to the div.image element, container class element is being rendered multiple times, you want to render the container class element once with multiple image class elements

<div class="container">
  <div class="image" *ngFor="let imageOrFile of imagesAndFiles">
    <dispo-einsatz-dokumente-gallery-image-item
      [image]="imageOrFile"
    ></dispo-einsatz-dokumente-gallery-image-item>
  </div>
</div>