Evite que la altura de un elemento flexible se expanda para coincidir con otros elementos flexibles

Tengo dos elementos dentro de un contenedor, que están uno al lado del otro mediante el uso de caja flexible. En el segundo elemento ( .flexbox-2), estoy configurando su altura en el CSS. Sin embargo, el primer elemento ( .flexbox-1) coincidirá con la altura de .flexbox-2. ¿Cómo dejaría .flexbox-1de igualar la altura de .flexbox-2y, en cambio, simplemente conservaría 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>

Ésta es una vieja solución. Mi respuesta es reemplazada por esta nueva respuesta de Aaron usandoalign-self . Esa es una mejor solución que no depende de una peculiaridad de CSS.

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

Ejemplo

En este ejemplo, eliminé el -webkitprefijo. Solo es realmente necesario para Safari y el prefijo se puede agregar encima de la versión sin prefijo. También eliminé flex-direction: rowya 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>

Sé que esta es una pregunta antigua, pero una mejor solución es configurar el elemento flexible para alinearlo con la parte superior usando 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>

Configurar el heightde los niños en max-contentevitará que se encojan.

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
  height: max-content;
}
.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>

Puede solucionarlo fácilmente agregando a los elementos de alineación principales : flex-start;

Eso es todo