Comment combiner flexbox et défilement vertical dans une application pleine hauteur ?

Question

Je veux utiliser une application pleine hauteur à l'aide de flexbox. J'ai trouvé ce que je voulais en utilisant l'ancien module de mise en page flexbox ( display: box; et d'autres choses) dans ce lien : CSS3 Flexbox application pleine hauteur et overflow

Il s'agit d'une solution correcte pour les navigateurs qui ne prennent en charge que l'ancienne version des propriétés CSS de flexbox.

Si je veux essayer d'utiliser les nouvelles propriétés de flexbox, j'essaierai d'utiliser la deuxième solution présentée dans le même lien comme un hack : utiliser un conteneur avec height: 0px; . Il fait apparaître un défilement vertical.

Je ne l'aime pas beaucoup parce qu'il introduit d'autres problèmes et qu'il s'agit plus d'une solution de contournement que d'une solution.

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>

J'ai également préparé un JSFiddle avec un exemple de base : http://jsfiddle.net/ch7n6/

Il s'agit d'un site HTML pleine hauteur et le pied de page se trouve en bas à cause des propriétés flexbox de l'élément de contenu. Je vous suggère de déplacer la barre entre le code CSS et le résultat pour simuler une hauteur différente.

Answer 1

Merci à https://stackoverflow.com/users/1652962/cimmanon qui m'a donné la réponse.

La solution consiste à définir une hauteur pour l'élément à défilement vertical. Par exemple :

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

L'élément sera ont une hauteur parce que la flexbox la recalcule, à moins que vous ne vouliez une hauteur minimale afin que vous puissiez utiliser height: 100px; que c'est exactement la même chose : min-height: 100px;

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

Donc la meilleure solution si vous voulez un min-height dans le défilement vertical :

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

Si vous voulez simplement un défilement vertical complet au cas où il n'y aurait pas assez d'espace pour voir l'article :

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

Le code final : http://jsfiddle.net/ch7n6/867/

Answer 2

Éditeur de spécifications Flexbox ici.

Il s'agit d'une utilisation encouragée de Flexbox, mais il y a quelques éléments à modifier pour obtenir un comportement optimal.

• N'utilisez pas de préfixes. La flexbox sans préfixe est bien supportée par la plupart des navigateurs. Commencez toujours par une version sans préfixe et n'ajoutez des préfixes que si cela est nécessaire pour la prendre en charge.

• Puisque votre en-tête et votre pied de page ne sont pas censés être flexibles, ils devraient tous deux avoir flex: none; sur eux. Actuellement, vous avez un comportement similaire en raison de certains effets de chevauchement, mais vous ne devriez pas compter sur cela, sauf si vous voulez vous embrouiller accidentellement plus tard. (La valeur par défaut est flex:0 1 auto Ils commencent donc à leur hauteur automatique et peuvent rétrécir mais pas grandir, mais ils sont également overflow:visible par défaut, ce qui déclenche leur min-height:auto pour les empêcher de rétrécir du tout. Si vous définissez un overflow sur eux, le comportement de min-height:auto (passage à zéro plutôt qu'à un contenu minimal) et ils seront soudainement écrasés par le très haut contenu. <article> élément.)

• Vous pouvez simplifier le <article> flex aussi - il suffit de mettre flex: 1; et vous serez prêt à partir. Essayez de vous en tenir aux valeurs communes dans https://drafts.csswg.org/css-flexbox/#flex-common à moins que vous n'ayez une bonne raison de faire quelque chose de plus compliqué - elles sont plus faciles à lire et couvrent la plupart des comportements que vous voudrez invoquer.

Answer 3

La spécification actuelle dit ceci concernant flex: 1 1 auto :

Dimensionne l'élément en fonction du width / height mais fait mais les rend totalement flexibles, de sorte qu'ils absorbent tout espace libre le long de l'axe principal. principal. Si tous les éléments sont soit flex: auto , flex: initial ou flex: none tout espace libre positif après que les éléments ont été dimensionnés sera distribué de manière égale aux éléments avec flex: auto .

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

Il me semble que si vous dites qu'un élément a une hauteur de 100px, il est traité comme une taille "suggérée", et non comme une taille absolue. Comme il est autorisé à se rétrécir et à s'agrandir, il prend autant d'espace qu'il le peut. C'est pourquoi l'ajout de cette ligne à votre élément "principal" fonctionne : height: 0 (ou tout autre petit nombre).