Verhindern Sie, dass sich die Höhe eines Flex-Elements erweitert, um mit anderen Flex-Elementen übereinzustimmen

Ich habe zwei Elemente in einem Container, die mithilfe einer Flexbox nebeneinander angeordnet sind. Beim zweiten Element ( .flexbox-2) stelle ich die Höhe im CSS ein. Dann entspricht das erste Element ( .flexbox-1) jedoch der Höhe von .flexbox-2. Wie würde ich aufhören .flexbox-1, die Höhe von anzupassen .flexbox-2, und stattdessen einfach die natürliche Höhe beibehalten?

Folgendes habe ich bisher (auch als jsFiddle erhältlich )

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

Dies ist eine alte Lösung. Meine Antwort wird durch diese neue Antwort von Aaron ersetztalign-self . Das ist eine bessere Lösung, die nicht auf einer CSS-Eigenart beruht.

Solange der Flex-Container selbst keine Höhe hat , können Sie height: 0%das erste Flex-Element einstellen . Da es keine Höhe hat, die von seinem übergeordneten Element geerbt werden kann, führt jede prozentuale Höhe dazu, dass es zusammenbricht. Es wird dann mit seinem Inhalt wachsen.

Beispiel

In diesem Beispiel habe ich das -webkitPräfix entfernt. Es ist nur für Safari wirklich erforderlich und das Präfix kann über der nicht vorangestellten Version hinzugefügt werden . Ich habe auch entfernt, flex-direction: rowda es der Standardwert ist.

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

Ich weiß, dass dies eine alte Frage ist, aber eine bessere Lösung besteht darin, das Flex-Element so einzustellen, dass es mit nach oben ausgerichtet wird 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>

Wenn Sie die Einstellung der heightKinder so max-contenteinstellen, dass sie nicht schrumpfen.

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

Sie können dies leicht beheben, indem Sie den übergeordneten Ausrichtungselementen Folgendes hinzufügen : flex-start;

Das ist alles