1
フレックスアイテムを1つ含む固定サイズのフレックスエレメントがあります。このflex項目には、オーバーフローした子があります。フレックスアイテムがデフォルトで縮小する可能性があるため、フレックスアイテムがフレックスエレメントに収まるようにオーバーフローがアクティブになることが予想されました。しかし、そうではありません。ここでフレックスアイテムの埋め込みブロックでオーバーフローが発生する
.wrapper {
width: 500px;
height: 100px;
display: flex;
flex-direction: column;
}
.pane {
overflow: auto;
}
div {
padding: 10px;
background-color: rgba(255, 0, 0, 0.3);
border: 1px solid
}<div class="wrapper">
<div class="body">
<div class="pane">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vehicula eget metus at maximus. Proin at nunc nibh. Curabitur elementum ipsum urna, ut rutrum justo consequat nec. Integer volutpat ornare nunc, ac pellentesque magna pharetra nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut sed turpis vitae dolor consequat elementum. Aenean in tempus nisi. Mauris varius finibus nunc, nec feugiat odio pharetra eget. Morbi maximus velit id tellus congue dignissim. Suspendisse potenti. Duis mattis ligula non purus dapibus, ac ornare urna tincidunt. Integer orci turpis, iaculis ac ornare a, dignissim sit amet libero. Cras libero risus, finibus tincidunt neque scelerisque, elementum tempus sapien.
</div>
</div>
</div>サンプル https://codepen.io/anon/pen/zzvmNR?editors=1100
それは一種の.bodyクラスのディスプレイフレックスで固定するのは簡単ですが、私はそれが働いていない理由を理解しようとしています最初の試み。
何が起こるか教えてもらえますか？
ありがとうございました。
複数のレベルにわたってネストされたコンテナを扱っているため、 '.body'に' display：flex'を適用するのが最良の解決策です。 –
問題の原因はフレックスアイテムの最小サイズアルゴリズム*です。このデフォルト設定（ 'min-height：auto'）は、フレックスアイテムがその内容より小さくならないようにします。このルールを 'min-height：0'または' overflow：以外の値でオーバーライドする必要があります。複製の詳細。 –