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:
flex-2
memiliki tinggi 100% (yang aneh karena item fleksibel memiliki 100% secara default + buggy di Chrome)flex-2-child
memiliki posisi absolut yang juga merepotkan
Ini tidak berfungsi di Chrome atau Firefox saat ini.
height:100%
tetapi mereka render dengan tinggi alami. Dan yang aneh adalah jika saya mengubah tinggi badan merekaauto
, maka mereka membuatheight:100%
seperti yang saya coba lakukan. Jelas tidak intuitif jika memang itu yang harusnya berhasil.Jawaban:
Menggunakan
align-items: stretch
Mirip dengan jawaban David Storey, solusi saya adalah:
Atau
align-items
, Anda dapat menggunakanalign-self
hanya pada.flex-2-child
item yang ingin Anda regangkan.sumber
stretch
: ini harus menjadi jawaban yang dipilih.height: 100%
dari komponen anak-anak yang Anda ingin sama tinggi dengan orang tuaheight: 100%
pada jawaban - saya hampir menyerah dan hanya melihat ini pada saat terakhir sebelum kembali keabsolute
- yang datang dengan segala macam masalah.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.
position: relative;
pada orang tua anak.position: absolute;
pada anak.overflow-y: auto;
div yang dapat digulir.height: 0;
Lihat jawaban ini untuk informasi lebih lanjut tentang masalah pengguliran.
sumber
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:
Kemudian beri tahu flex-2-child untuk menjadi fleksibel:
Lihat http://jsfiddle.net/2ZDuE/10/
Alasannya adalah bahwa flex-2-child bukanlah item flexbox, tetapi orang tuanya.
sumber
align-items: center
jika Andaalign-self: stretch
hanya menggunakan satu anak.min-height: 100vh;
untuk.flex-2
elemen untuk membuatnya bekerja. Terima kasih untuk bantuannya!Saya kira perilaku Chrome lebih konsisten dengan spesifikasi CSS (meskipun kurang intuitif). Menurut flexbox spec, default
stretch
nilaialign-self
properti berubah hanya digunakan nilai dari elemen "ukuran properti salib" (height
dalam hal ini). Dan, seperti yang saya pahami spec CSS2.1 , persentase ketinggian dihitung dari nilai yang ditentukan orang tuaheight
, bukan nilai yang digunakan. Nilai yang ditentukan dari orangtuaheight
tidak dipengaruhi oleh properti flex apa pun dan masihauto
.Pengaturan eksplisit
height: 100%
memungkinkan secara formal untuk menghitung persentase tinggi anak, seperti pengaturanheight: 100%
untukhtml
memungkinkan menghitung persentase tinggibody
dalam CSS2.1.sumber
height:100%
ke.flex-2
. Ini jsfiddle .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.Saya menemukan solusinya sendiri, misalkan Anda memiliki CSS di bawah ini:
Dalam hal ini, mengatur ketinggian 100% tidak akan berfungsi, jadi yang saya lakukan adalah mengatur
margin-bottom
aturanauto
, seperti:dan anak akan disejajarkan dengan yang paling atas dari orang tua, Anda juga dapat menggunakan
align-self
aturan jika Anda mau.sumber
Gagasannya adalah
display:flex;
denganflex-direction: row;
mengisicontainer
div dengan.flex-1
dan.flex-2
, tetapi itu tidak berarti bahwa.flex-2
memiliki defaultheight:100%;
bahkan jika diperluas dengan ketinggian penuh dan memiliki elemen anak (.flex-2-child
) denganheight:100%;
Anda harus mengatur orang tuaheight:100%;
atau menggunakandisplay:flex;
denganflex-direction: row;
di.flex-2
div juga.Dari yang saya tahu
display:flex
tidak akan memperpanjang semua elemen anak Anda hingga 100%.Demo kecil, menghilangkan ketinggian dari
.flex-2-child
dan digunakandisplay:flex;
pada.flex-2
: http://jsfiddle.net/2ZDuE/3/sumber
html
css
http://jsfiddle.net/2ZDuE/750/
sumber
Ini juga bisa diselesaikan dengan
align-self: stretch;
elemen yang ingin kita regangkan.Terkadang diinginkan untuk hanya merentangkan satu item dalam pengaturan flexbox.
sumber
.container {. . . . align-items: stretch; . . . . }
sumber
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:
wadah css:
dan jelas termasuk css + 0,2 inti
dengar biola
sumber