Jak rozciągnąć dzieci, aby wypełnić oś poprzeczną?

141

Mam flexbox lewy-prawy:

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

Rozwiń fragment

Problem w tym, że właściwe dziecko nie reaguje. Mówiąc konkretnie, chcę, aby wypełnił wysokość opakowania.

Jak to osiągnąć?

css flexbox Deborah Cole
źródło

wypełnia wysokość opakowania! przetestowałem to w Chrome i Firefoxie i nie było problemu. być może za bardzo uprościłeś swój kod. możesz to sprawdzić, ustawiając background-colordla dzieci lub ustawiając align-items: centerw opakowaniu.

samad montazeri

tak, wysokość opakowania nie jest wypełniona w safari z pewnych powodów ... chrome i firefox robią to ładnie, ustawiając wysokość: '100%' u dzieci

Pencilcheck

Odpowiedzi:

175

Elementy podrzędne kontenera typu row-flexbox automatycznie wypełniają pionową przestrzeń kontenera.
Określ flex: 1;dla dziecka, jeśli chcesz, aby wypełniło pozostałą poziomą przestrzeń:

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

Rozwiń fragment

Określ flex: 1;dla obojga dzieci, jeśli chcesz, aby wypełniały równe ilości poziomej przestrzeni:

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

Rozwiń fragment

Alex Shesterov
źródło

flexjest skróconą własnością dla flex-grow, flex-shrinki flex-basis. flex: 1;jest równoważne flex-grow: 1;.

Rory O'Kane

Wydaje się, że align-items: stretch;nie jest to potrzebne

Matt