Принудительно согнуть элемент в ширину строки

Я пытаюсь сохранить первые 2 дочерних элемента в одной строке, тогда как третий элемент находится в своем собственном нижнем виде на полной ширине, при использовании flex.

Я особенно заинтересован в использовании свойств flex-grow и flex-shrink на первых двух элементах (что является одной из моих причин не использовать проценты), однако третий элемент действительно должен быть полной ширины и ниже первых двух.

Элемент label добавляется программно после text элемента, когда есть ошибка, и я не могу изменить код.

Как заставить элемент метки охватывать 100% ширину ниже остальных двух элементов, которые расположены с использованием 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>

Ответ 1

Всякий раз, когда вы хотите, чтобы элемент flex занимал целую строку, установите его в width: 100%/flex-basis: 100% и включите wrap в контейнере.

Элемент теперь потребляет все доступное пространство. Братья и сестры принуждаются к другим строкам.

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

Ответ 2

Кажется, вы ищете min-width для дочернего flex-wrap:wrap и flex-wrap:wrap on 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>