Wie kann ich Flexbox und vertikales Scrollen in einer App in voller Höhe kombinieren?

Ich möchte eine App in voller Höhe mit Flexbox verwenden. Ich habe unter display: box;diesem Link gefunden, was ich mit dem alten Flexbox-Layout-Modul ( und anderen Dingen) möchte : CSS3 Flexbox-App in voller Höhe und Überlauf

Dies ist eine korrekte Lösung für Browser, die nur die alte Version der Flexbox-CSS-Eigenschaften unterstützen.

Wenn ich versuchen möchte, die neueren Flexbox-Eigenschaften zu verwenden, werde ich versuchen, die zweite Lösung in demselben Link zu verwenden, der als Hack aufgeführt ist: Verwenden eines Containers mit height: 0px;. Es wird eine vertikale Schriftrolle angezeigt.

Ich mag es nicht sehr, weil es andere Probleme mit sich bringt und eher eine Problemumgehung als eine Lösung ist.

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>

Ich habe auch eine JSFiddle mit einem Basisbeispiel vorbereitet: http://jsfiddle.net/ch7n6/

Es handelt sich um eine HTML-Website in voller Höhe, und die Fußzeile befindet sich aufgrund der Flexbox-Eigenschaften des Inhaltselements unten. Ich schlage vor, Sie verschieben den Balken zwischen CSS-Code und Ergebnis, um unterschiedliche Höhen zu simulieren.

Vielen Dank an https://stackoverflow.com/users/1652962/cimmanon , das mir die Antwort gegeben hat.

Die Lösung besteht darin, eine Höhe für das vertikale scrollbare Element festzulegen. Beispielsweise:

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

Das Element wird Höhe haben , weil Flexbox es neu berechnet , es sei denn , Sie wollen min-height so können Sie verwenden , height: 100px;dass es genau das gleiche wie:min-height: 100px;

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

Also die beste Lösung, wenn Sie eine min-heightin der vertikalen Schriftrolle wollen:

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

Wenn Sie nur einen vollständigen vertikalen Bildlauf wünschen, falls nicht genügend Platz vorhanden ist, um den Artikel anzuzeigen:

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

Der endgültige Code: http://jsfiddle.net/ch7n6/867/

Flexbox-Spezifikationseditor hier.

Dies ist eine empfohlene Verwendung von Flexbox, aber es gibt einige Dinge, die Sie für ein optimales Verhalten optimieren sollten.

• Verwenden Sie keine Präfixe. Nicht vorfixierte Flexbox wird in den meisten Browsern gut unterstützt. Beginnen Sie immer mit einem nicht festgelegten Wert und fügen Sie nur bei Bedarf Präfixe hinzu, um dies zu unterstützen.

• Da Kopf- und Fußzeile nicht zum Biegen gedacht sind, sollten beide darauf flex: none;gesetzt sein. Im Moment haben Sie aufgrund einiger überlappender Effekte ein ähnliches Verhalten, aber Sie sollten sich nicht darauf verlassen, es sei denn, Sie möchten sich später versehentlich verwirren. (Die Standardeinstellung ist flex:0 1 auto, dass sie auf ihrer automatischen Höhe beginnen und schrumpfen können, aber nicht wachsen. Sie sind jedoch auch overflow:visiblestandardmäßig aktiviert, wodurch ihre Standardeinstellung ausgelöst wird min-height:auto, um zu verhindern, dass sie überhaupt schrumpfen. Wenn Sie jemals eine Option festlegen overflow, min-height:autoändert sich das Verhalten von Änderungen (Umschalten auf Null anstatt auf Min-Inhalt) und sie werden plötzlich von dem extra hohen <article>Element gequetscht .)

• Sie können das auch vereinfachen <article> flex- einfach einstellen flex: 1;und los geht's. Versuchen Sie, sich an die allgemeinen Werte in https://drafts.csswg.org/css-flexbox/#flex-common zu halten, es sei denn, Sie haben einen guten Grund, etwas Komplizierteres zu tun - sie sind leichter zu lesen und decken die meisten Verhaltensweisen ab du wirst aufrufen wollen.

Die aktuelle Spezifikation sagt dies in Bezug auf flex: 1 1 auto:

Passt die Größe des Elements an die width/ heightEigenschaften an, macht sie jedoch vollständig flexibel, sodass sie jeglichen freien Platz entlang der Hauptachse absorbieren. Wenn alle Elemente entweder sind flex: auto, flex: initialoder flex: nonejede positive freie Speicherplatz , nachdem die Einzelteile so bemessen wurde , wird mit gleichmäßig auf die Positionen verteilt werden flex: auto.

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

Es klingt für mich so, als würde ein Element, das 100 Pixel groß ist, eher wie eine "vorgeschlagene" Größe behandelt, nicht wie eine absolute. Da es schrumpfen und wachsen darf, nimmt es so viel Platz ein, wie es darf. Deshalb funktioniert das Hinzufügen dieser Zeile zu Ihrem "Haupt" -Element: height: 0(oder eine andere kleinere Zahl).