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>