web-dev-qa-db-fra.com

Empêcher le flex-shrink CSS3 d'écraser le contenu

J'essaie de créer une mise en page flexible en CSS3 avec 3 cases empilées les unes sur les autres. Les cases sont des frères et sœurs et ont donc le même élément parent. La hauteur de la première boîte doit correspondre à son contenu. La hauteur des deux cases suivantes doit croître pour s'adapter à leur contenu respectif jusqu'à ce qu'ils soient sur le point de déborder de leur parent. Dans ce cas, ils doivent rétrécir pour ne pas déborder.

Le problème est que je ne peux pas comprendre comment empêcher l'une des boîtes de rétrécissement de s'écraser si son contenu est petit par rapport à l'autre boîte de rétrécissement. Je veux que ces boîtes se réduisent jusqu'à un certain point où elles ne rétréciront plus - disons l'équivalent de deux lignes de texte par exemple. Réglage min-width n'est pas une option car je ne veux pas que les cases soient plus hautes que leur contenu au cas où le contenu ne serait qu'une seule ligne par exemple. Si l'une des cases est arrivée au point où elle ne doit plus rétrécir et que le parent ne peut pas les tenir sans déborder, le parent doit avoir une barre de défilement.

Je ne connais pas le contenu à l'avance donc la mise en page doit être dynamique. Je veux résoudre cela uniquement avec CSS, si possible.

Voici un exemple du problème où box3 est trop petit:

p {
    margin: 0;
}
.container, .box {
    border: 1px solid black;
}
.box {
    background-color: white;
    margin: 1em;
    overflow: auto;
}
#container {
    background-color: yellow;
    display: flex;
    flex-direction: column;
    height: 15em;
    overflow: auto;
}
#box1 {
    flex: 0 0 auto;
}
#box2 {
}
#box3 {
}
<div id="container" class="container">
    <div id="box1" class="box">
        <p>◼</p>
    </div>
    <div id="box2" class="box">
        <p>◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◻</p>
        <p>◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼</p>
    </div>
    <div id="box3" class="box">
        <p>◼◻◻</p>
        <p>◼◼◻</p>
        <p>◼◼◼</p>
    </div>
</div>
cssflexbox
24
Spomf

SI je comprends bien votre question, la propriété flex-shrink devrait être ce que vous recherchez.

Définissez # box1 sur flex-shrink: 0

Définissez # box2 sur flex-shrink: 1

Réglez # box3 sur flex-shrink: 1

36
jbenjohnson