web-dev-qa-db-fra.com

flexbox mauvais comportement avec max-height

Mon problème est probablement mieux expliqué par l'exemple. Ce jsfiddle suivant fonctionnera dans Chrome:

http://jsfiddle.net/ga6g4/

Comme vous pouvez le voir, j'ai une hauteur fixe flexbox avec un en-tête fixe et un corps défilable. Conteneur .lhs à hauteur max:

max-height: 100px;

http://jsfiddle.net/ga6g4/1/

Ça casse. Il semble maintenant penser que ma liste est maintenant à hauteur zéro! Une idée pourquoi cela fait ce qu'il fait et comment je peux le réparer?

EDIT: Je n'étais pas assez descriptif dans mon message d'origine sur la façon dont je veux que cela se comporte. Fondamentalement, l'extérieur ne doit utiliser que la hauteur minimale requise, mais uniquement jusqu'à un maximum (défini par la hauteur maximale). À ce stade, je veux que le contenu commence à défiler.

cssflexbox
24
Barguast

OK, voici la solution que j'ai trouvée si quelqu'un est intéressé:

http://jsfiddle.net/vN65r/

Fondamentalement, j'ai dû appliquer ce qui suit à l'en-tête à hauteur fixe:

flex: 0 0 auto;

Et ce qui suit au corps de défilement à hauteur variable:

flex: 0 1 auto;

J'espère que ça aide quelqu'un

23
Barguast

Donner à la fois max-height:100px; et height:100%; devrait marcher. http://jsfiddle.net/ga6g4/2/

4
vaskort

Je pense que la réponse est que vous utilisez flex-direction:column.

Bien que je ne sois toujours pas tout à fait clair sur ce que vous essayez de réaliser en passant à flex-direction:row semble avoir le bon effet.

Démo JSfiddle

[~ # ~] css [~ # ~] 

.lhs {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 250px;
    max-height: 100px;
    border: 1px solid red;
    display: flex;
    flex-direction: row;
}

.panel-container {
    flex: 1;
    overflow: auto;
}
1
Paulie_D

La réponse de Barguast est bonne. Voici une version simplifiée utilisant Bootstrap:

<div class="h-50 border border-danger">
    <div class="d-flex flex-column h-100">
        <header>Header</header>
        <div class="flex-shrink-1" style="overflow-y: auto;">
            <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
            </ul>
        </div>
        <footer>Footer</footer>
    </div>
</div>

L'astuce est le flex-shrink-1, associé à overflow-y: auto.

0
ccleve