Wie kann ich Flexbox-Kinder zu 100% ihrer Eltern machen?

459

Ich versuche, den vertikalen Raum eines Flex-Elements in einer Flexbox zu füllen.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

Und hier ist die JSFiddle

flex-2-child füllt die erforderliche Höhe nur in den beiden Fällen aus, in denen:

  1. flex-2 hat eine Höhe von 100% (was seltsam ist, weil ein Flex-Element standardmäßig 100% hat + es ist in Chrome fehlerhaft)
  2. flex-2-child hat eine absolute Position, die auch unpraktisch ist

Dies funktioniert derzeit nicht in Chrome oder Firefox.

Raz
quelle
Was ist das Problem bei der Verwendung von Höhe: 100%; für .flex-2?
rmagnum2002
Es widerspricht dem Zweck des Flex-Elements, den Inhalt selbst zu füllen, und es gibt mir den seltsamsten Fehler in Chrom, bei dem die Höhe bei jeder Größenänderung des Fensters auf Null zurückgeht
Raz
3
Tatsächlich ist die neueste Version von Firefox die einzige, die ordnungsgemäß funktioniert
Raz
1
Derzeit gibt es signifikante Unterschiede im Verhalten zwischen Browsern, wenn es darum geht, prozentuale Höhen in Flexbox zu rendern: stackoverflow.com/a/35537510/3597276
Michael Benjamin
2
Ja, Chrome hat einige Probleme, insbesondere mit verschachtelten Flexboxen. Zum Beispiel habe ich eine verschachtelte Flexbox mit Kindern, die height:100%diese haben, aber stattdessen mit natürlicher Höhe rendern. Und das Seltsame ist, wenn ich ihre Größe auf ändere auto, rendern sie so, height:100%wie ich es versucht habe. Es ist definitiv nicht intuitiv, ob es so funktionieren sollte.
Trusktr

Antworten:

237

Verwenden align-items: stretch

Ähnlich wie bei David Storeys Antwort lautet meine Problemumgehung:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Alternativ align-itemskönnen Sie align-selfnur den .flex-2-childGegenstand verwenden, den Sie dehnen möchten.

BT
quelle
7
stretch: Dies sollte die gewählte Antwort sein.
Dave Everitt
1
Dies ist definitiv die beste Antwort auf die Frage. Funktioniert perfekt.
Marcias
Ja, dies ist in der Tat die beste Antwort auf diese Frage.
Øyvind Bråthen
20
Vergessen Sie nicht, auch die untergeordnete height: 100%Komponente zu entfernen , die dieselbe Größe wie die übergeordnete Komponente haben soll
Ilham Wahabi GX
Bitte fügen Sie height: 100%der Antwort das Entfernen hinzu - ich habe fast aufgegeben und dies erst im letzten Moment gesehen, bevor ich darauf zurückkam absolute- was mit allen möglichen Problemen verbunden ist.
Peter
274

Ich habe eine ähnliche Frage beantwortet hier .

Ich weiß, dass Sie bereits gesagt haben, position: absolute;ist unpraktisch, aber es funktioniert. Weitere Informationen zum Beheben des Größenänderungsproblems finden Sie weiter unten.

In dieser jsFiddle finden Sie auch eine Demo, obwohl ich nur Webkit-Präfixe hinzugefügt habe, die in Chrome geöffnet sind.

Sie haben grundsätzlich zwei Probleme, die ich separat behandeln werde.

  1. Das Kind eines Flex-Elements dazu bringen, die Höhe zu 100% zu füllen
    • Legen Sie position: relative;auf dem Elternteil des Kindes.
    • Setze position: absolute;auf das Kind.
    • Sie können dann Breite / Höhe nach Bedarf einstellen (100% in meinem Beispiel).
  2. Behebung der Größenänderung beim Scrollen in Chrome
    • Setzen Sie overflow-y: auto;das scrollbare Div auf.
    • Für das scrollbare Div muss eine explizite Höhe angegeben werden. Mein Beispiel hat bereits eine Höhe von 100%, aber wenn noch keines angewendet wurde, können Sie angebenheight: 0;

Weitere Informationen zum Bildlauf finden Sie in dieser Antwort .

Brett Postin
quelle
10
Punkt 1) funktioniert perfekt in Chrome, Firefox benötigt die absolute Position nicht.
Yuri
223

Wenn ich das richtig verstehe, möchten Sie, dass Flex-2-Child die Höhe und Breite seines Elternteils ausfüllt, damit der rote Bereich vollständig vom Grün bedeckt wird?

Wenn ja, müssen Sie nur flex-2 einstellen, um flexbox zu verwenden:

.flex-2 {
    display: flex;  
}

Dann sagen Sie flex-2-child, dass es flexibel werden soll:

.flex-2-child {    
    flex: 1;
}

Siehe http://jsfiddle.net/2ZDuE/10/

Der Grund dafür ist, dass flex-2-child kein Flexbox-Element ist, sondern das übergeordnete.

David Storey
quelle
Wie kann ich dasselbe tun, nur mit einer Körpergröße von 100% und jedem Kind ist 50/50?
Ricky Levi
7
Beachten Sie, dass Sie diesen Fix nicht verwenden können, wenn Sie "Elemente ausrichten: Mitte" verwenden, da Ihre Elemente jetzt gleich hoch werden.
Neil Monroe
10
@NeilMonroe Sie können immer noch verwenden, align-items: centerwenn Sie align-self: stretchnur für ein Kind verwenden.
BT
1
Hallo @ David, ich habe deine Lösung ausprobiert, sie funktioniert gut für das Flex-Richtung: Zeilen-Layout, es scheint nicht mit Flex-Richtung: Spalten-Layout zu funktionieren, oder ich habe irgendwelche falschen Stellen im Code. Könnten Sie helfen, zu überprüfen, warum in dieser Geige jsfiddle.net/78o54Lmv die innere Box nicht die volle Höhe ihres Elternteils einnimmt ?
Huan Feng
Ich muss hinzufügen , min-height: 100vh;um .flex-2Element funktioniert es zu machen. Danke für die Hilfe!
Tenaciousd93
24

Ich nehme an, dass das Verhalten von Chrome besser mit der CSS-Spezifikation übereinstimmt (obwohl es weniger intuitiv ist). Gemäß der Flexbox-Spezifikation ändert der Standardwert stretchder align-selfEigenschaft nur den verwendeten Wert der "Cross Size-Eigenschaft" des Elements ( heightin diesem Fall). Und nach meinem Verständnis der CSS2.1-Spezifikation werden die prozentualen Höhen aus dem angegebenen Wert des übergeordneten Elements berechnet height, nicht aus dem verwendeten Wert. Der angegebene Wert des übergeordneten Elements heightwird von keinen Flex-Eigenschaften beeinflusst und bleibt bestehen auto.

Die explizite Einstellung height: 100%ermöglicht formal die Berechnung der prozentualen Größe des Kindes, genau wie die Einstellung height: 100%auf htmldie Berechnung der prozentualen Größe von bodyin CSS2.1.

Ilya Streltsyn
quelle
2
Genau! Um dies in die Praxis umzusetzen, fügen Sie einfach height:100%auf .flex-2. Hier ist die jsfiddle .
CourtDemone
7
Das Verhalten von Chrome stimmt besser mit der Interpretation der CSS-Spezifikation durch Chrome Team überein . Obwohl es so interpretiert werden könnte, gibt es weitaus bessere Möglichkeiten, es zu interpretieren, von denen uns keine in diesen Basar gefangen hätte, ärgerliches und lästiges Verhalten. Sie hätten mehr darüber nachdenken sollen.
WraithKenny
1
@ RickDoesburg, das war vor mehr als einem Jahr, aber ich glaube, ich musste auf Elemente mit fester Höhe zurückgreifen. Ich wünschte, diese Browser würden sich zusammenreißen. Ich fange wirklich an, den mobilen Raum nicht zu mögen.
Jordanien
1
Das Festlegen eines untergeordneten Elements eines vertikalen Flexbox-Containers height: 100%führt in Chrome zu sehr merkwürdigen Ergebnissen. Es scheint, dass dies dazu führt, dass die "angegebene Höhe" auf die Gesamthöhe des Containers und nicht auf die Höhe des Elements selbst festgelegt wird. Dies führt zu unerwünschtem Bildlauf, wenn für andere Elemente Größen berechnet werden.
Jules
13

Ich habe die Lösung selbst gefunden. Angenommen, Sie haben das folgende CSS:

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

In diesem Fall funktioniert das Festlegen der Höhe auf 100% nicht. Ich setze die margin-bottomRegel also autowie folgt :

.child {
  margin-bottom: auto;
}

align-selfWenn das Kind am obersten Punkt des Elternteils ausgerichtet ist, können Sie die Regel auch verwenden, wenn Sie dies bevorzugen.

.child {
  align-self: flex-start;
}
user3896501
quelle
Ein netter Hack, aber das Problem ist: Wenn das Kind eine Seitenleiste ist und eine Hintergrundfarbe hat, ist der Randbereich immer noch weiß.
Boris Burkov
Das Besondere an dieser Lösung ist, dass die Größe des Elternteils dynamisch sein kann! Bei den vorherigen Lösungen muss das übergeordnete Element eine festgelegte Höhe haben. Danke dafür.
Bribbons
4

Eine Idee wäre, dass display:flex;mit flex-direction: row;das containerdiv mit .flex-1und gefüllt wird .flex-2, aber das bedeutet nicht, dass dies .flex-2eine Standardeinstellung hat, height:100%;selbst wenn es auf volle Höhe erweitert ist und um ein untergeordnetes Element ( .flex-2-child) mit zu haben, müssen height:100%;Sie das übergeordnete Element festlegen height:100%;oder verwenden display:flex;mit flex-direction: row;auf dem .flex-2div auch.

Soweit ich weiß, display:flexwird die Höhe aller untergeordneten Elemente nicht auf 100% erweitert.

Eine kleine Demo, die die Höhe entfernt .flex-2-childund verwendet display:flex;auf .flex-2: http://jsfiddle.net/2ZDuE/3/

rmagnum2002
quelle
3

html

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

CSS

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

Carol McKay
quelle
0

Dies kann auch mit align-self: stretch;dem Element gelöst werden, das gedehnt werden soll.

Manchmal ist es wünschenswert, nur ein Element in einem Flexbox-Setup zu dehnen.

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

GiorgosK
quelle
-7

.container {. . . . Elemente ausrichten: dehnen; . . . . }}

HRK
quelle
5
Willkommen beim Stackoverflow. Sie müssen Ihre Antwort vollständig erklären und was sie dazu beiträgt, unterscheidet sich von den vorhandenen Antworten. Siehe stackoverflow.com/help/how-to-answer
Simon.SA
1
Ihre Antwort scheint dieselbe zu sein wie die von BT (über drei Jahre früher geschrieben), aber weitaus schlechter ausgedrückt.
Quentin
-12

Dies ist meine Lösung mit CSS +

Zuallererst, wenn das erste Kind (Flex-1) 100px sein sollte, sollte es nicht Flex sein. In CSS + können Sie flexible und / oder statische Elemente (Spalten oder Zeilen) festlegen, und Ihr Beispiel wird so einfach:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

Container CSS:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

und offensichtlich enthalten CSS + 0,2 Kern

höre die Geige

Marco Allori
quelle