Forcer l'élément flexible à couvrir toute la largeur de la ligne

Question

J'essaie de conserver les 2 premiers éléments d'enfant sur la même ligne, tandis que le troisième élément est à sa propre, ci-dessous, pleine largeur, le tout à l'aide de flex.

Je suis particulièrement intéressé par l'aide de la flex-grow et flex-shrink propriétés sur les 2 premiers éléments (qui est une de mes raisons pour ne pas utiliser les pourcentages) cependant le troisième élément doit vraiment être pleine largeur et en dessous des deux premiers.

L' label élément est ajouté par programme après l' text élément quand il y a une erreur et je ne peux pas modifier le code.

Comment puis-je forcer l'élément label pour une durée de 100% de la largeur ci-dessous les deux autres éléments qui sont positionnés à l'aide de flex?

.parent {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #ececec;
}

.parent * {
  width: 100%;
}

.parent #text {
  min-width: 75px;
  flex-shrink: 2.25;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>

Answer 1

Chaque fois que vous voulez un flex point d'occuper une ligne entière, il width: 100% / flex-basis: 100%, et activer wrap sur le conteneur.

L'élément maintenant consomme tout l'espace disponible. Les frères et sœurs sont contraints à d'autres lignes.

.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #ececec;
}

.error {
  flex: 0 0 100%; /* fg: 0, fs: 0, fb: 100% */
  border: 1px dashed red;
}

#range, #text {
  flex: 1;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>

Answer 2

Vous semblez rechercher min-width sur l'enfant et flex-wrap:wrap sur le parent:

 .parent {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.parent > * {
  flex-grow: 1;
}

.parent > .error {
  min-width: 100%;
  background-color: rgba(255,0,0,.3);
} 

 <div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>