Evitar que los elementos flexibles se estiren

Al usar el diseño Flexbox, es posible que los elementos flexibles se estiren y llenen el espacio disponible en su contenedor . Sin embargo, hay situaciones en las que es posible que quieras evitar que esto suceda.

¿Por qué se pueden estirar los elementos flexibles?

De forma predeterminada, los elementos flexibles se estirarán a lo largo del eje principal de su contenedor, que normalmente es horizontal (fila) o vertical (columna). Esto se debe a que la propiedad flexible está establecida en 1 de forma predeterminada, lo que indica que el elemento debe ser flexible y expandirse para llenar cualquier espacio disponible.

Prevenir el estiramiento del elemento flexible

Para evitar que un elemento flexible se estire, puede anular el valor flexible predeterminado configurándolo en 0. Esto hará que el elemento se reduzca para ajustarse a su contenido, evitando que ocupe más espacio que necesario.

Ejemplo

Considere el siguiente ejemplo:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

  This is some text.

En este ejemplo, el elemento flexible (span) se estira para llenar toda la altura de su contenedor. Para evitar esto, agregue el siguiente estilo al elemento div:

align-items: flex-start;

Esto alinea los elementos flexibles a lo largo del inicio de su contenedor, evitando que se estiren hasta llenar toda la altura.