tablas - tamaño de una tabla html

Forzar el elemento flexible para abarcar todo el ancho de la fila

Question

Estoy tratando de retener los primeros 2 elementos secundarios en la misma fila mientras el tercer elemento está por debajo en su ancho completo, todo mientras uso flex.

Estoy particularmente interesado en usar las propiedades de flex-grow flex-shrink en los primeros 2 elementos (que es una de mis razones para no usar porcentajes), sin embargo, el tercer elemento realmente debe ser de ancho completo y debajo de los dos primeros.

El elemento de label se agrega mediante programación después del elemento de text cuando hay un error y no puedo cambiar el código.

¿Cómo fuerzo al elemento de la etiqueta a abarcar un ancho del 100% por debajo de los otros dos elementos que se colocan usando 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

Parece que está buscando min-width el elemento secundario y flex-wrap:wrap en el elemento primario:

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

Answer 2

Siempre que desee que un elemento flexible ocupe una fila completa, configúrelo en width: 100% / flex-basis: 100% y habilite la wrap en el contenedor.

El artículo ahora consume todo el espacio disponible. Los hermanos son forzados a otras filas.

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