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>