Çapraz ekseni doldurmak için çocukları nasıl uzatırız?

141

Sol-sağ bir flexbox'ım var:

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

Snippet'i genişlet

Sorun şu ki, doğru çocuk duyarlı davranmıyor. Spesifik olarak, ambalajın yüksekliğini doldurmasını istiyorum.

Bunu nasıl başarabilirim?

css flexbox

— Deborah Cole
kaynak

sargının yüksekliğini dolduruyor! Chrome ve Firefox'ta test ettim ve hiçbir sorun yoktu. belki kodunuzu çok basitleştirdiniz. bunu background-colorçocuklar için ayarlayarak veya align-items: centersarmalayıcıda ayarlayarak test edebilirsiniz .

— samad montazeri

Evet, ambalajın yüksekliği bazı nedenlerden dolayı safari dolu değil ... chrome ve firefox bunu yüksekliği ayarlayarak güzelce yapıyor: çocuklarda '% 100'

— Pencilcheck

175

Bir sıra esnek kutu konteynerinin alt öğeleri otomatik olarak kabın dikey alanını doldurur.
flex: 1;Kalan yatay alanı doldurmasını istiyorsanız, bir çocuk için belirtin :

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

Snippet'i genişlet

flex: 1;Her iki çocuk için de eşit miktarda yatay boşluk doldurmalarını istiyorsanız belirtin :

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

Snippet'i genişlet

— Alex Shesterov
kaynak

flexiçin bir kestirme bir özelliktir flex-grow, flex-shrinkve flex-basis. flex: 1;eşittir flex-grow: 1;.

— Rory O'Kane

Görünüşe align-items: stretch;gerekli değildir

— Matt