web-dev-qa-db-ja.com

CSS3 flex-shrinkがコンテンツを押しつぶさないようにする

CSS3で3つのボックスを積み重ねて柔軟なレイアウトを作成しようとしています。ボックスは兄弟であるため、同じ親要素があります。最初のボックスの高さは、その内容に合わせる必要があります。次の2つのボックスの高さはgrowで、それぞれのコンテンツが親からオーバーフローするまで収まります。その場合、オーバーフローしないように縮小する必要があります。

問題は、他の収縮ボックスに比べて内容が小さい場合に、収縮ボックスの1つがつぶれるのを防ぐ方法を理解できないことです。これらのボックスを、もう縮小されない特定のポイントまで縮小したいと思います。たとえば、2行のテキストに相当するとします。設定min-widthはオプションではありません。たとえば、コンテンツが1行だけの場合に備えて、ボックスをコンテンツよりも高くしたくないからです。ボックスのいずれかがそれ以上縮小しないポイントに達し、親がオーバーフローせずにボックスを保持できない場合、親はスクロールバーを取得します。

事前にコンテンツがわからないので、レイアウトを動的にする必要があります。できればCSSだけで解決したい。

box3が小さすぎる問題の例を次に示します。

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

あなたの質問を正しく理解できれば、flex-shrinkプロパティはあなたが探しているものでなければなりません。

＃box1をflex-shrink: 0に設定します

＃box2をflex-shrink: 1に設定します

＃box3をflex-shrink: 1に設定します

36
jbenjohnson