【html/CSS】子要素が親要素から縦に はみ出る対処法

「子要素が親要素からはみでちゃったよ！縦に！」

下記のように子要素の高さにより親要素から縦に はみ出てしまったときの対処法を解説します。

<style>
.example{
    width: 50%;
    height: 100px;
    box-sizing: border-box;
    padding: 20px;
    background: #5ad8e8;
}
.example>div{
    height: 100px;
    background: #dbca92;
}
</style>
<div class="example">
    <div>子要素</div>
</div>

親要素のheightを削除

親要素のheightを削除し、「height:auto（初期値）」にして、子要素の高さに合わせましょう。

<style>
.example2{
    width: 50%;
    /*コレを消すheight: 100px;*/
    box-sizing: border-box;
    padding: 20px;
    background: #5ad8e8;
}
.example2>div{
    height: 100px;
    background: #dbca92;
}
</style>
<div class="example2">
    <div>子要素</div>
</div>

「height:auto」は内側の要素に合わせて最小の高さになります。

ホームページは縦に長くなります。

高さは指定せず、内容量に合わせて自動で合わせるようにするのは基本です。

ある程度高さを持たせたいのであればpaddingで余白を持たせることをオススメします。

heightを消したくないとき

「このブロックの高さは固定にしたいんだ！」

heightを消したくないときは以下の対応を検討しましょう。

box-sizing:border-boxを消す

<style>
.example3{
    width: 50%;
    height: 100px;
    /*コレを消すbox-sizing: border-box;*/
    padding: 20px;
    background: #5ad8e8;
}
.example3>div{
    height: 100px;
    background: #dbca92;
}
</style>
<div class="example3">
    <div>子要素</div>
</div>

widthやheightはpaddingとborderを含めないサイズです。

逆にpaddingとborderを含めたサイズにするには「box-sizing:border-box」を指定します。

親要素に「box-sizing:border-box」を指定していようが子要素の高さは親要素のpaddingを除いた高さが基準となります。

「box-sizing:border-box」を指定したばかりにそろわなくなるときは「box-sizing:border-box」を消してみましょう。

ただし、今度はwidthがそろわなくなる場合があります。

そうなったらやはり「box-sizing:border-box」を指定し、子要素の高さは「（親要素の高さ）-（親要素の上下のpadding）」を指定しましょう。

下記も参考にしてください。

overflow-y:autoを指定

「overflow-y:auto」を指定すると縦方向にはみ出した分をスクロールにします。

<style>
.example4{
    /*コレ*/overflow-y: auto;
    width: 50%;
    height: 100px;
    box-sizing: border-box;
    padding: 20px;
    background: #5ad8e8;
}
.example4>div{
    height: 100px;
    background: #dbca92;
}
</style>
<div class="example4">
    <div>子要素</div>
</div>

テキストやメニューなど一定の範囲内からはみ出た部分をスクロールで表示させるには「overflow-y:auto」を指定しましょう。

ただし、ユーザーは意外とスクロールしたがりません。できる限り、スクロールしなくても画面（親要素）内に収まるように調整することをオススメします。

【まとめ】親要素から縦にはみ出る対処法

親要素のheightを削除して高さを自動にする

heightを消したくないとき

• box-sizing:border-boxを消すかheightを計算
• overflow-y:autoを指定してスクロールさせる

以上、子要素が親要素から縦に はみ出る対処法でした。