Bagaimana cara menggabungkan flexbox dan vertical scroll dalam aplikasi full-height?

Saya ingin menggunakan aplikasi full-height menggunakan flexbox. Saya menemukan apa yang saya inginkan menggunakan modul tata letak flexbox lama ( display: box;dan hal-hal lain) di tautan ini: Aplikasi tinggi penuh CSS3 Flexbox dan overflow

Ini adalah solusi yang tepat untuk browser yang hanya mendukung versi lama dari properti CSS flexbox.

Jika saya ingin mencoba menggunakan properti flexbox yang lebih baru, saya akan mencoba menggunakan solusi kedua di tautan yang sama yang terdaftar sebagai peretasan: menggunakan wadah dengan height: 0px;. Itu membuat untuk menampilkan gulungan vertikal.

Saya tidak terlalu menyukainya karena ini menimbulkan masalah lain dan ini lebih merupakan solusi daripada solusi.

html, body {
    height: 100%;    
}
#container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#container article {
	flex: 1 1 auto;
	overflow-y: scroll;
}
#container header {
    background-color: gray;
}
#container footer {
    background-color: gray;
}

<section id="container" >
    <header id="header" >This is a header</header>
    <article id="content" >
        This is the content that
        <br />
        With a lot of lines.
        <br />
        With a lot of lines.
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
        <br />
        This is the content that
        <br />
        With a lot of lines.
        <br />
    </article>
    <footer id="footer" >This is a footer</footer>
</section>

Saya telah menyiapkan JSFiddle juga dengan contoh dasar: http://jsfiddle.net/ch7n6/

Ini adalah situs web HTML dengan tinggi penuh dan footer berada di bagian bawah karena properti flexbox dari elemen konten. Saya sarankan Anda memindahkan bilah antara kode CSS dan hasilnya untuk mensimulasikan ketinggian yang berbeda.

Terima kasih kepada https://stackoverflow.com/users/1652962/cimmanon yang memberi saya jawabannya.

Solusinya adalah mengatur ketinggian ke elemen vertikal yang dapat digulir. Sebagai contoh:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

Elemen akan memiliki height karena flexbox menghitung ulang kecuali Anda menginginkan min-height sehingga Anda dapat menggunakannya height: 100px;persis sama dengan:min-height: 100px;

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* == min-height: 100px*/
}

Jadi solusi terbaik jika Anda ingin min-heightdi scroll vertikal:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

Jika Anda hanya ingin scroll vertikal penuh seandainya tidak ada cukup ruang untuk melihat artikel:

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

Kode terakhir: http://jsfiddle.net/ch7n6/867/

Editor spesifikasi Flexbox di sini.

Ini adalah penggunaan flexbox yang dianjurkan, tetapi ada beberapa hal yang harus Anda sesuaikan untuk perilaku terbaik.

• Jangan gunakan prefiks. Flexbox yang tidak diprefix didukung dengan baik di hampir semua browser. Selalu mulai dengan tanpa prefiks, dan hanya tambahkan prefiks jika perlu untuk mendukungnya.

• Karena header dan footer Anda tidak dimaksudkan untuk dilenturkan, keduanya seharusnya sudah flex: none;terpasang padanya. Saat ini Anda memiliki perilaku serupa karena beberapa efek yang tumpang tindih, tetapi Anda tidak boleh mengandalkannya kecuali Anda ingin membuat diri Anda bingung nanti. (Defaultnya adalah flex:0 1 auto, jadi mereka mulai dari tinggi otomatisnya dan bisa menyusut tapi tidak bertambah, tapi mereka juga overflow:visiblesecara default, yang memicu defaultnya min-height:autountuk mencegahnya menyusut sama sekali. Jika Anda pernah menyetelnya overflow, perilaku min-height:autoberubah (beralih ke nol daripada konten-min) dan mereka akan tiba-tiba terhimpit oleh elemen ekstra-tinggi <article>.)

• Anda juga dapat menyederhanakannya <article> flex- cukup setel flex: 1;dan Anda akan baik-baik saja. Cobalah untuk tetap menggunakan nilai-nilai umum di https://drafts.csswg.org/css-flexbox/#flex-common kecuali Anda memiliki alasan yang kuat untuk melakukan sesuatu yang lebih rumit - nilai-nilai tersebut lebih mudah dibaca dan mencakup sebagian besar perilaku Anda pasti ingin memohon.

Spesifikasi saat ini mengatakan ini tentang flex: 1 1 auto:

Mengubah ukuran item berdasarkan width/ heightproperties, tetapi membuatnya fleksibel sepenuhnya, sehingga mereka menyerap ruang kosong di sepanjang sumbu utama. Jika semua item yang baik flex: auto, flex: initialatau flex: none, setiap ruang bebas positif setelah item telah berukuran akan didistribusikan secara merata ke item dengan flex: auto.

http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#flex-common

Bagi saya kedengarannya seperti jika Anda mengatakan sebuah elemen berukuran 100px, itu diperlakukan lebih seperti ukuran yang "disarankan", bukan absolut. Karena dibiarkan menyusut dan tumbuh, ia memakan ruang sebanyak yang diizinkan. Itulah mengapa menambahkan baris ini ke elemen "utama" Anda berhasil: height: 0(atau nomor kecil lainnya).