Wie kann man Kinder dehnen, um die Querachse zu füllen?

141

Ich habe eine Links-Rechts-Flexbox:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Erweitern Sie das Snippet

Das Problem ist, dass sich das richtige Kind nicht reagiert. Um genau zu sein, möchte ich, dass es die Höhe des Wrappers ausfüllt.

Wie erreicht man das?

css flexbox Deborah Cole
quelle

es füllt die Höhe der Verpackung! Ich habe es in Chrome und Firefox getestet und es gab kein Problem. Vielleicht haben Sie Ihren Code zu stark vereinfacht. Sie können dies testen, indem Sie background-colorfür Kinder oder align-items: centerin Wrapper einstellen .

Samad Montazeri

Ja, die Höhe des Wrappers ist aus bestimmten Gründen nicht in Safari ausgefüllt ... Chrome und Firefox

tun

Antworten:

175

Die untergeordneten Elemente eines Row-Flexbox-Containers füllen automatisch den vertikalen Raum des Containers aus.
Geben Sie flex: 1;für ein Kind an, ob es den verbleibenden horizontalen Raum ausfüllen soll:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Erweitern Sie das Snippet

Geben Sie flex: 1;für beide Kinder an, ob sie den horizontalen Raum zu gleichen Teilen ausfüllen sollen:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Erweitern Sie das Snippet

Alex Shesterov
quelle

flexist eine zusammenfassende Eigenschaft für flex-grow, flex-shrinkund flex-basis. flex: 1;ist äquivalent zu flex-grow: 1;.

Rory O'Kane

Scheint align-items: stretch;nicht nötig zu sein

Matt