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

459

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.

Raz
sumber
apa masalah dengan menggunakan tinggi: 100%; untuk .flex-2?
rmagnum2002
Ini menentang tujuan item fleksibel yaitu untuk mengisi konten dengan sendirinya dan itu memberi saya bug paling aneh di krom di mana tingginya kembali ke nol setiap kali saya mengubah ukuran jendela
Raz
3
Sebenarnya, versi terbaru Firefox adalah satu-satunya yang berfungsi dengan baik
Raz
1
Saat ini, ada perbedaan yang signifikan dalam perilaku di antara browser ketika datang ke rendering persentase ketinggian di flexbox: stackoverflow.com/a/35537510/3597276
Michael Benjamin
2
Yap, Chrome memiliki beberapa masalah, terutama dengan flexbox bersarang. Misalnya saya punya kotak fleksibel bersarang dengan anak-anak yang memiliki height:100%tetapi mereka render dengan tinggi alami. Dan yang aneh adalah jika saya mengubah tinggi badan mereka auto, maka mereka membuat height:100%seperti yang saya coba lakukan. Jelas tidak intuitif jika memang itu yang harusnya berhasil.
trusktr

Jawaban:

238

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.

BT
sumber
7
stretch: ini harus menjadi jawaban yang dipilih.
Dave Everitt
1
Jelas ini adalah jawaban terbaik untuk pertanyaan itu. Bekerja dengan sempurna.
marcias
Ya, ini memang jawaban terbaik untuk pertanyaan ini.
Øyvind Bråthen
20
jangan lupa juga menghapus height: 100%dari komponen anak-anak yang Anda ingin sama tinggi dengan orang tua
Ilham Wahabi GX
Silakan tambahkan hapus height: 100%pada jawaban - saya hampir menyerah dan hanya melihat ini pada saat terakhir sebelum kembali ke absolute- yang datang dengan segala macam masalah.
Peter
274

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.

Brett Postin
sumber
10
Poin 1) berfungsi sempurna di Chrome, Firefox tidak perlu posisi absolut.
yuri
224

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.

David Storey
sumber
Bagaimana saya bisa melakukan hal yang sama, hanya dengan tinggi 100% dan setiap anak adalah 50/50?
Ricky Levi
7
Ketahuilah bahwa jika Anda menggunakan "align-items: center" Anda tidak akan dapat menggunakan perbaikan ini karena item Anda sekarang akan menjadi sama tingginya.
Neil Monroe
10
@NeilMonroe Anda masih dapat menggunakan align-items: centerjika Anda align-self: stretchhanya menggunakan satu anak.
BT
1
Hai @ David, saya mencoba solusi Anda, itu berfungsi dengan baik untuk flex-direction: tata letak baris, sepertinya tidak bekerja dengan flex-direction: tata letak kolom, atau saya punya tempat yang salah dalam kode. Bisakah Anda membantu memeriksa mengapa di jsfiddle.net/78o54Lmv biola ini , kotak batin tidak akan menempati ketinggian penuh dari induknya?
huan feng
Saya harus menambahkan min-height: 100vh;untuk .flex-2elemen untuk membuatnya bekerja. Terima kasih untuk bantuannya!
Tenaciousd93
24

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.

Ilya Streltsyn
sumber
2
Persis! Untuk menempatkan ini ke dalam praktek, hanya menambahkan height:100%ke .flex-2. Ini jsfiddle .
CourtDemone
7
Perilaku Chrome lebih konsisten dengan interpretasi Tim Chrome terhadap spesifikasi CSS. Meskipun bisa ditafsirkan seperti itu, ada cara yang jauh lebih baik untuk menafsirkannya, yang mana pun tidak akan menjebak kita ke dalam bazaar, perilaku menjengkelkan, dan menjengkelkan ini. Mereka seharusnya memikirkannya lebih lanjut.
WraithKenny
1
@RickDoesburg, ini lebih dari setahun yang lalu, tapi saya percaya bahwa saya harus menggunakan elemen ketinggian tetap. Saya berharap browser ini akan melakukan aksi bersama. Saya benar-benar mulai tidak menyukai ruang ponsel.
Jordan
1
Menyetel anak dari wadah flexbox vertikal height: 100%adalah memberikan hasil yang sangat aneh bagi saya di Chrome. Tampaknya ini menyebabkan "tinggi yang ditentukan" diatur ke tinggi total wadah , daripada ketinggian elemen itu sendiri, sehingga menyebabkan pengguliran yang tidak diinginkan ketika elemen lain memiliki ukuran yang dihitung relatif terhadapnya.
Jules
13

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;
}
pengguna3896501
sumber
Peretasan yang bagus, tetapi masalahnya adalah: jika anak adalah sidebar dan memiliki warna latar belakang, ruang margin masih putih.
Boris Burkov
Apa yang hebat tentang solusi ini adalah bahwa ketinggian orang tua bisa dinamis! Solusi sebelumnya mengharuskan orang tua untuk memiliki ketinggian yang ditetapkan. Terima kasih untuk ini.
Bribbons
4

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/

rmagnum2002
sumber
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/

Carol McKay
sumber
0

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>

GiorgosK
sumber
-7

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

HRK
sumber
5
Selamat datang di stackoverflow. Anda perlu menjelaskan jawaban Anda sepenuhnya, dan apa yang dikontribusikan yang berbeda dari jawaban yang ada. Lihat stackoverflow.com/help/how-to-answer
Simon.SA
1
Jawaban Anda tampaknya sama dengan jawaban BT (ditulis lebih dari tiga tahun lebih awal) tetapi dinyatakan jauh lebih buruk.
Quentin
-12

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

Marco Allori
sumber