La transition dans flex-basis ne fonctionne pas lorsque l'on utilise flex-wrap:wrap

Question

J'ai essayé de faire cette animation sans succès. Quelqu'un a-t-il une idée de la façon dont je peux résoudre ce problème ? Merci

Voici mon CSS :

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

.child {
  flex-basis: 30em;
  overflow: hidden;
  transition: flex-basis 1000ms ease-in-out;
}

.child:hover {
  flex-basis: 100%;
}

Et mon HTML :

<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
  <div class="child">Child 5</div>
</div>

Answer 1

* {
  box-sizing: border-box;
}

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

.child {
  flex-basis: 20%;
  overflow: hidden;
  color: white;
  transition: flex-basis 1000ms ease-in-out;
  padding: 20px;
  background-color: red;
}

.container:hover .child {
  flex-basis: 100%;
}

<div class="container">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
  <div class="child">Child 5</div>
</div>