Bagaimana saya bisa membuat Flexbox anak-anak 100% tinggi dari orang tua mereka?

Saya mencoba mengisi ruang vertikal item fleksibel di dalam Flexbox.

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

Dan inilah JSFiddle

flex-2-child tidak memenuhi tinggi yang diminta kecuali dalam dua kasus di mana:

1. flex-2 memiliki tinggi 100% (yang aneh karena item fleksibel memiliki 100% secara default + buggy di Chrome)
2. flex-2-child memiliki posisi absolut yang juga merepotkan

Ini tidak berfungsi di Chrome atau Firefox saat ini.

Menggunakan align-items: stretch

Mirip dengan jawaban David Storey, solusi saya adalah:

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

Atau align-items, Anda dapat menggunakan align-selfhanya pada .flex-2-childitem yang ingin Anda regangkan.

Saya telah menjawab pertanyaan serupa di sini .

Saya tahu Anda sudah mengatakan position: absolute;tidak nyaman tetapi berhasil. Lihat di bawah untuk informasi lebih lanjut tentang cara memperbaiki masalah pengubahan ukuran.

Lihat juga jsFiddle ini untuk demo, walaupun saya hanya menambahkan awalan webkit yang begitu terbuka di Chrome.

Anda pada dasarnya memiliki 2 masalah yang akan saya tangani secara terpisah.

1. Mendapatkan anak dari item fleksibel untuk mengisi ketinggian 100%
   • Atur position: relative;pada orang tua anak.
   • Atur position: absolute;pada anak.
   • Anda kemudian dapat mengatur lebar / tinggi sesuai kebutuhan (100% dalam sampel saya).
2. Memperbaiki "quirk" scrolling pengubahan ukuran di Chrome
   • Pasang overflow-y: auto;div yang dapat digulir.
   • Div yang dapat digulir harus memiliki tinggi eksplisit yang ditentukan. Sampel saya sudah memiliki tinggi 100% tetapi jika belum ada yang diterapkan Anda dapat menentukanheight: 0;

Lihat jawaban ini untuk informasi lebih lanjut tentang masalah pengguliran.

Jika saya mengerti dengan benar, Anda ingin flex-2-child mengisi tinggi dan lebar induknya, sehingga area merah sepenuhnya tertutup oleh hijau?

Jika demikian, Anda hanya perlu mengatur flex-2 untuk menggunakan flexbox:

.flex-2 {
    display: flex;  
}

Kemudian beri tahu flex-2-child untuk menjadi fleksibel:

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

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

Alasannya adalah bahwa flex-2-child bukanlah item flexbox, tetapi orang tuanya.

Saya kira perilaku Chrome lebih konsisten dengan spesifikasi CSS (meskipun kurang intuitif). Menurut flexbox spec, default stretchnilai align-selfproperti berubah hanya digunakan nilai dari elemen "ukuran properti salib" ( heightdalam hal ini). Dan, seperti yang saya pahami spec CSS2.1 , persentase ketinggian dihitung dari nilai yang ditentukan orang tua height, bukan nilai yang digunakan. Nilai yang ditentukan dari orangtua heighttidak dipengaruhi oleh properti flex apa pun dan masih auto.

Pengaturan eksplisit height: 100%memungkinkan secara formal untuk menghitung persentase tinggi anak, seperti pengaturan height: 100%untuk htmlmemungkinkan menghitung persentase tinggi bodydalam CSS2.1.

Saya menemukan solusinya sendiri, misalkan Anda memiliki CSS di bawah ini:

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

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

Dalam hal ini, mengatur ketinggian 100% tidak akan berfungsi, jadi yang saya lakukan adalah mengatur margin-bottomaturan auto, seperti:

.child {
  margin-bottom: auto;
}

dan anak akan disejajarkan dengan yang paling atas dari orang tua, Anda juga dapat menggunakan align-selfaturan jika Anda mau.

.child {
  align-self: flex-start;
}

Gagasannya adalah display:flex;dengan flex-direction: row;mengisi containerdiv dengan .flex-1dan .flex-2, tetapi itu tidak berarti bahwa .flex-2memiliki default height:100%;bahkan jika diperluas dengan ketinggian penuh dan memiliki elemen anak ( .flex-2-child) dengan height:100%;Anda harus mengatur orang tua height:100%;atau menggunakan display:flex;dengan flex-direction: row;di .flex-2div juga.

Dari yang saya tahu display:flextidak akan memperpanjang semua elemen anak Anda hingga 100%.

Demo kecil, menghilangkan ketinggian dari .flex-2-childdan digunakan display:flex;pada .flex-2: http://jsfiddle.net/2ZDuE/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/

Ini juga bisa diselesaikan dengan align-self: stretch;elemen yang ingin kita regangkan.

Terkadang diinginkan untuk hanya merentangkan satu item dalam pengaturan flexbox.

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

.container {. . . . align-items: stretch; . . . . }

Ini solusi saya menggunakan css +

Pertama-tama jika anak pertama (flex-1) harus 100px tidak boleh fleksibel. Pada css + sebenarnya Anda dapat mengatur elemen fleksibel dan / atau statis (kolom atau baris) dan contoh Anda menjadi semudah ini:

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

wadah css:

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

dan jelas termasuk css + 0,2 inti

dengar biola