Par défaut, les éléments enfants d'un display flex ne passent jamais à la ligne.

Dans cet exemple, la largeur totale des enfants est de 150%. Ils sont condensés et restent sur la même ligne.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  display: flex;
} 

.child {
  width: 50%;
}

Pour permettre aux éléments enfants de passer à la ligne lorsque leur largeur totale dépasse celle du parent, on utilise la propriété flex-wrap:

.parent {
  display: flex;
	flex-wrap: wrap;
} 

.child {
  width: 50%;
}

<aside> ⬅️ align-items

</aside>

<aside> ➡️ gap

</aside>