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

82

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>
Erweitern Sie das Snippet

html css flexbox Tom Oakley
quelle
Verwandte: Wie deaktiviere ich Spalten gleicher Höhe in Flexbox?
Michael Benjamin

Antworten:

56

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.

Code-Snippet anzeigen

misterManSam
quelle
144

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>
Erweitern Sie das Snippet

Aaron
quelle
1
Danke @MrGood Die akzeptierte Antwort ist über 3 Jahre alt und war zu der Zeit ein guter Weg, um das gewünschte Ergebnis zu erzielen.
Aaron
1
Geniale Antwort!
Alexander Wigmore
5
Beachten Sie, dass Sie für das übergeordnete Element auch 'align-items: flex-start' ausführen können, um zu verhindern, dass alle untergeordneten Elemente wachsen - in meinem Fall erforderlich.
Daniel Sokolowski
5
align-items: center, baseline, flex-start, flex-endarbeiten auch
ViES
2
Dies ist erforderlich, da der Standardwert für align-itemsist stretch.
DylanReile
1

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>
Erweitern Sie das Snippet

Erik Martín Jordán
quelle
1

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

Das ist alles

Sergiu Cebotaru
quelle
1
Willkommen bei Stack Overflow. Wenn Sie eine Antwort auf eine fünf Jahre alte Frage mit vorhandenen Antworten hinzufügen, ist es wichtig zu erklären, welchen neuen Aspekt der Frage Sie ansprechen und wie Ihre Antwort funktioniert und warum sie verwendet werden sollte. Die korrekte Code-Formatierung hilft auch sehr, da Sie im Moment nur fetten Text in einem Satz haben, der keinen Kontext für die CSS-Regel enthält, zu der Sie ihn hinzufügen möchten.
Jason Aller