html - justificación - Evite que una altura de elementos flexibles se expanda para coincidir con otros elementos flexibles

inline-flex

Question

Tengo dos elementos dentro de un contenedor, que están uno al lado del otro utilizando la caja flexible. En el segundo elemento ( .flexbox-2 ), estoy configurando su altura en el CSS. Sin embargo, entonces el primer elemento ( .flexbox-1 ) coincidirá con la altura de .flexbox-2 . ¿Cómo puedo evitar que .flexbox-1 coincida con la altura de .flexbox-2 y, en su lugar, mantener su altura natural?

Esto es lo que tengo hasta ahora (también disponible como jsFiddle )

.container {
display: -webkit-flex;
-webkit-flex-direction: row;
}
.flexbox-1 {
-webkit-flex: 1;
border: solid 3px red;
}
.flexbox-2 {
-webkit-flex: 2;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}

<div class="container">
<div class="flexbox-1">.flexbox-1</div>
<div class="flexbox-2">.flexbox-2</div>
</div>

Answer 1

Esta es una solución antigua. Mi respuesta es reemplazada por esta nueva respuesta de Aaron usando align-self . Esa es una mejor solución que no depende de un capricho de CSS.

Siempre que el contenedor flexible no tenga altura en sí mismo , puede establecer la height: 0% en el primer elemento flexible. Debido a que no tiene altura para heredar de su elemento primario, cualquier altura porcentual hará que colapse. Luego crecerá con sus contenidos.

Ejemplo

En este ejemplo, he eliminado el prefijo -webkit . Solo es realmente necesario para Safari y el prefijo se puede agregar por encima de la versión sin prefijo. También eliminé flex-direction: row ya que es el valor predeterminado.

.container {
display: flex;
}
.flexbox-1 {
flex: 1;
height: 0%;
border: solid 3px red;
}
.flexbox-2 {
flex: 2;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}

<div class="container">
<div class="flexbox-1">.flexbox-1</div>
<div class="flexbox-2">.flexbox-2</div>
</div>

Answer 2

Sé que esta es una vieja pregunta, pero una mejor solución es configurar el elemento flexible para que se alinee con el flex-start .

/* Default Styles */
.container {
display: flex;
}
.flexbox-2 {
flex: 2;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}
.flexbox-1 {
flex: 1;
align-self: flex-start;
border: solid 3px red;
}

<div class="container">
<div class="flexbox-1">"align-self: flex-start;"</div>
<div class="flexbox-2">.flexbox-2</div>
</div>