Zapobiegaj rozszerzaniu się wysokości elementów elastycznych w celu dopasowania do innych elementów elastycznych

Mam dwa elementy wewnątrz kontenera, które są obok siebie za pomocą flex box. Na drugim elemencie ( .flexbox-2) ustawiam jego wysokość w CSS. Jednak wtedy pierwszy element ( .flexbox-1) będzie pasował do wysokości .flexbox-2. Jak mógłbym przestać .flexbox-1dopasowywać wysokość .flexbox-2, a zamiast tego po prostu zachować jej naturalną wysokość?

Oto, co mam do tej pory (dostępne również jako 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>

To jest stare rozwiązanie. Moja odpowiedź została zastąpiona nową odpowiedzią, którą Aaron używaalign-self . To lepsze rozwiązanie, które nie polega na dziwactwie CSS.

Dopóki kontener elastyczny nie ma samej wysokości , możesz ustawić height: 0%na pierwszym elemencie elastycznym. Ponieważ nie ma wysokości do dziedziczenia po swoim rodzicu, każda wysokość procentowa spowoduje zwinięcie. Wtedy będzie rosnąć wraz z zawartością.

Przykład

W tym przykładzie usunąłem -webkitprzedrostek. Jest to naprawdę wymagane tylko w przeglądarce Safari, a prefiks można dodać nad wersją bez prefiksu. Usunąłem również, flex-direction: rowponieważ jest to wartość domyślna.

.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>

Wiem, że to stare pytanie, ale lepszym rozwiązaniem jest ustawienie elementu flex tak, aby był wyrównany do góry za pomocą 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>

Możesz to łatwo naprawić, dodając do elementu nadrzędnego align-items: flex-start;

To wszystko

Ustawienie heightdzieci na max-contentzapobiegnie ich kurczeniu się.

.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>