Erzwingen Sie, dass sich das Flex-Element über die gesamte Reihenbreite erstreckt

Ich versuche, die ersten beiden untergeordneten Elemente in derselben Zeile beizubehalten, während sich das dritte Element in voller Breite unten befindet, während Flex verwendet wird.

Ich interessiere mich besonders für die in Verwendung flex-growund flex-shrinkEigenschaften auf den ersten 2 Elemente (die nicht mit Prozent einer meiner Gründe ist) aber das dritte Element wirklich volle Breite und unterhalb der ersten beiden sein muss.

Das labelElement wird programmgesteuert nach dem textElement hinzugefügt, wenn ein Fehler auftritt und ich den Code nicht ändern kann.

Wie erzwinge ich, dass das Beschriftungselement eine Breite von 100% unter den beiden anderen Elementen aufweist, die mit flex positioniert werden?

.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>

Wenn ein Flex-Element eine ganze Zeile belegen soll, setzen Sie es auf width: 100%oder flex-basis: 100%und aktivieren Sie es wrapfür den Container.

Der Gegenstand verbraucht jetzt den gesamten verfügbaren Platz. Geschwister werden in andere Reihen gezwungen.

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

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}

<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

Weitere Informationen: Der Anfangswert der flex-wrapEigenschaft ist nowrap, was bedeutet, dass alle Elemente in einer Reihe angeordnet werden. MDN

Sie scheinen nach min-widthKind und flex-wrap:wrapEltern zu suchen :

.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>