Come posso combinare flexbox e scorrimento verticale in un'app a tutta altezza?

Voglio usare un'app a tutta altezza usando flexbox. Ho trovato quello che voglio usando il vecchio modulo di layout flexbox ( display: box;e altre cose) in questo link: CSS3 Flexbox app full-height e overflow

Questa è una soluzione corretta per i browser che supportano solo la vecchia versione delle proprietà CSS di flexbox.

Se voglio provare a utilizzare le proprietà flexbox più recenti, cercherò di utilizzare la seconda soluzione nello stesso collegamento elencato come hack: utilizzando un contenitore con height: 0px;. Fa mostrare uno scroll verticale.

Non mi piace molto perché introduce altri problemi ed è più una soluzione alternativa che una soluzione.

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>

Ho preparato anche un JSFiddle con un esempio di base: http://jsfiddle.net/ch7n6/

È un sito Web HTML a tutta altezza e il piè di pagina è in fondo a causa delle proprietà flexbox dell'elemento di contenuto. Ti suggerisco di spostare la barra tra codice CSS e risultato per simulare altezze diverse.

Grazie a https://stackoverflow.com/users/1652962/cimmanon che mi ha dato la risposta.

La soluzione è impostare un'altezza per l'elemento scorrevole verticale. Per esempio:

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

L'elemento avrà altezza perché flexbox lo ricalcola a meno che tu non voglia un'altezza minima in modo che tu possa usarla height: 100px;esattamente come:min-height: 100px;

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

Quindi la soluzione migliore se vuoi uno min-heightscorrimento verticale:

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

Se vuoi solo lo scorrimento verticale completo nel caso in cui non ci sia spazio sufficiente per vedere l'articolo:

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

Il codice finale: http://jsfiddle.net/ch7n6/867/

Editor delle specifiche Flexbox qui.

Questo è un uso incoraggiato di flexbox, ma ci sono alcune cose che dovresti modificare per un comportamento migliore.

• Non utilizzare prefissi. Flexbox senza prefisso è ben supportato dalla maggior parte dei browser. Inizia sempre con un prefisso e aggiungi solo prefissi se necessario per supportarlo.

• Poiché l'intestazione e il piè di pagina non sono pensati per flettere, dovrebbero essere entrambi flex: none;impostati su di essi. In questo momento hai un comportamento simile a causa di alcuni effetti di sovrapposizione, ma non dovresti fare affidamento su quello a meno che tu non voglia confonderti accidentalmente in seguito. (L'impostazione predefinita è flex:0 1 auto, quindi iniziano alla loro altezza automatica e possono ridursi ma non crescere, ma sono anche overflow:visibleper impostazione predefinita, il che attiva il loro valore predefinito min-height:autoper impedire che si restringano. Se mai imposti un overflowsu di loro, il comportamento delle min-height:automodifiche (passando a zero anziché a contenuto minimo) e verranno improvvisamente schiacciati <article>dall'elemento extra-alto .)

• Puoi semplificare <article> flexanche il - basta impostare flex: 1;e sarai a posto. Cerca di restare fedele ai valori comuni in https://drafts.csswg.org/css-flexbox/#flex-common a meno che tu non abbia una buona ragione per fare qualcosa di più complicato: sono più facili da leggere e coprono la maggior parte dei comportamenti vorrai invocare.

La specifica attuale dice questo riguardo a flex: 1 1 auto:

Ridimensiona l'elemento in base alle proprietà width/ height, ma li rende completamente flessibili, in modo che assorbano lo spazio libero lungo l'asse principale. Se tutti gli elementi sono o flex: auto, flex: initialo flex: none, qualsiasi spazio libero positivo dopo che gli articoli sono stati dimensionati sarà distribuito in modo uniforme per gli elementi con flex: auto.

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

Mi sembra che se dici che un elemento è alto 100 px, viene trattato più come una dimensione "suggerita", non come assoluta. Poiché è consentito restringersi e crescere, occupa tutto lo spazio che gli è consentito. Ecco perché l'aggiunta di questa riga al tuo elemento "principale" funziona: height: 0(o qualsiasi altro numero piccolo).