Bagaimana cara meregangkan anak untuk mengisi sumbu silang?

141

Saya memiliki flexbox kiri-kanan:

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

Luaskan cuplikan

Masalahnya adalah bahwa anak yang tepat tidak berperilaku responsif. Untuk lebih spesifik, saya ingin mengisi ketinggian bungkusnya.

Bagaimana cara mencapai ini?

css flexbox

— Deborah Cole
sumber

itu mengisi ketinggian pembungkus! Saya mengujinya di Chrome dan Firefox dan tidak ada masalah. mungkin Anda terlalu menyederhanakan kode Anda. Anda dapat menguji ini dengan mengatur background-coloruntuk anak-anak atau pengaturan align-items: centerdalam pembungkus.

— samad montazeri

ya, ketinggian bungkus tidak diisi dengan safari untuk beberapa alasan ... chrome dan firefox melakukan ini dengan baik dengan menetapkan tinggi: '100%' pada anak-anak

— Pencilcheck

175

Anak-anak dari wadah baris-kotak fleksibel secara otomatis mengisi ruang vertikal wadah.
Tentukan flex: 1;untuk anak jika Anda ingin mengisi ruang horisontal yang tersisa:

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

Luaskan cuplikan

Tetapkan flex: 1;untuk kedua anak jika Anda ingin mereka mengisi ruang horizontal dalam jumlah yang sama:

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

Luaskan cuplikan

— Alex Shesterov
sumber

flexadalah properti singkatan untuk flex-grow, flex-shrink, dan flex-basis. flex: 1;setara dengan flex-grow: 1;.

— Rory O'Kane

Sepertinya align-items: stretch;tidak diperlukan

— Matt