外側に大きさの決まってるブロック要素が合って
その中に bootstrap の card を配置して
中に大きなコンテンツがあっても card 内でスクロールしたいです
以下のように max-height 100% を内側に順に指定していったのですが
card-body のところで max-height がきかずにはみ出してしまいます
container の max-height を height にかえれば収まるんですが
内側の要素が小さい場合それにあわせて card も小さくしたいです
なぜ height だと内側に収まるのに max-height だときかないのでしょうか
.container {
max-height: 100%;
}
.card {
max-height: 100%;
}
.card-body {
overflow: auto;
max-height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height: 100px; background-color: #eef; padding: 1ex;">
<div class="container">
<div class="card">
<div class="card-body">
<div style="height: 200px; background-color: #fee">
</div>
</div>
</div>
</div>
height: 100% で収まる
.container {
height: 100%;
}
.card {
max-height: 100%;
}
.card-body {
overflow: auto;
max-height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height: 100px; background-color: #eef; padding: 1ex;">
<div class="container">
<div class="card">
<div class="card-body">
<div style="height: 200px; background-color: #fee">
</div>
</div>
</div>
</div>
height
プロパティを使ったコードで達成できているように見えます。本質問ではなぜmax-height
プロパティでは期待通りに動作しなかったのかを知りたい、という認識で良いでしょうか?