¿Cómo hacer que un artículo flexible no llene la altura del contenedor flexible?

Como puede ver en el siguiente código, el div izquierdo dentro del contenedor flexible se estira para alcanzar la altura del div derecho. ¿Hay algún atributo que pueda establecer para que su altura sea la mínima requerida para mantener su contenido (como la height: auto habitual height: auto divisiones height: auto fuera de contenedores flexibles)?

 #a { display: flex; } #a > div { background-color: red; padding: 5px; margin: 2px; } #b { height: auto; } 
 
left
right
right
right
right
right

El atributo align-items , o respectivamente align-content controla este comportamiento.

align-items define el posicionamiento de los artículos de forma perpendicular a flex-direction .

La flex-direction predeterminada es row , por lo que la colocación vertical se puede controlar con elementos de align-items .

También existe el atributo de alineación align-self para controlar la alineación por elemento.

 #a { display:flex; align-items:flex-start; align-content:flex-start; } #a > div { background-color:red; padding:5px; margin:2px; } #a > #c { align-self:stretch; } 
 
left
middle
right
right
right
right
right

Cuando crea un contenedor flexible, entran en juego varias reglas flexibles predeterminadas.

Dos de estas reglas predeterminadas son flex-direction: row y align-items: stretch . Esto significa que los artículos flexibles se alinearán automáticamente en una sola fila, y cada elemento llenará la altura del contenedor.

Si no desea que los elementos flexibles se estiren, es decir, como escribió:

hacer que su altura sea la mínima requerida para mantener su contenido

… simplemente anule el valor predeterminado con align-items: flex-start .

 #a { display: flex; align-items: flex-start; /* NEW */ } #a > div { background-color: red; padding: 5px; margin: 2px; } #b { height: auto; } 
 
left
right
right
right
right
right