【CSS/html】子要素が親要素をはみ出す原因と解決方法【tableなど】

「レスポンシブ対応したら横スクロールが発生している！」

「tableが横に長くなって親要素からはみ出てる！」

tableなど子要素が親要素をはみ出す原因と解決方法を解説します。

【原因1】合計widthが100%を超えている

子要素が親要素をはみ出すのは子要素の合計幅が親の幅を超えているためです。

下記はその例です。青背景が親要素の枠、白が子要素の枠です。

<style>
.example{
    width: 300px;
    border: 1px solid #333;
    padding: 10px;
    background: #abb7fc;
}
.example>div{
    width: 100%;
    /*コレ*/border: 1px solid #333;
    /*コレ*/padding: 20px;
    background: #FFF;
}
</style>
<div class="example">
    <div>divなど</div>
</div>

子要素に「width: 100%」が指定されています。これだけなら親の幅と同じになるはずです。

しかし、他に「border:1px」と「padding:20px」が指定されています。

通常widthにborderとpaddingは含まれません。

子要素の合計幅は「(border-left-width)+(padding-left)+(width)+(padding-right)+(border-right-width)」となります。

上記の例の場合では100%+22pxとなり、親の幅超えてしまうというわけです。

【解決方法1】width:autoにする

子要素をwidth:autoにするとborderとpaddingを含めて親の幅になるように自動調整してくれます。（ブロック要素の場合）

<style>
.example2{
    width: 300px;
    border: 1px solid #333;
    padding: 10px;
    background: #abb7fc;
}
.example2>div{
    /*コレ*/width: auto;
    border: 1px solid #333;
    padding: 20px;
    background: #FFF;
}
</style>
<div class="example2">
    <div>divなど</div>
</div>

【解決方法2】box-sizing:border-boxを指定する

width:autoにできない、あるいはwidth:autoにしても理想の形にならない場合はbox-sizing:border-boxを指定しましょう。

box-sizing:border-boxはwidthの指定がborderとpaddingを含んだものにするCSSです。

<style>
.example3{
    width: 300px;
    border: 1px solid #333;
    padding: 10px;
    background: #abb7fc;
}
.example3>div{
    /*コレ*/box-sizing: border-box;
    width: 100%;
    border: 1px solid #333;
    padding: 20px;
    background: #FFF;
}
</style>
<div class="example3">
    <div>divなど</div>
</div>

【原因2】半角英数が折り返されない

半角英数は途中に空白か全角がない限り改行されません。

スマホ版のtableの中にURLの記述などがあるときによく起きる現象です。

<style>
.example4{
    width: 300px;
    border: 1px solid #333;
    padding: 10px;
    background: #abb7fc;
}
</style>
<div class="example4">
    <table border="1">
        <tr>
            <td>セル</td><td>https://csshtml.work/comic001/index.php</td>
        </tr>
    </table>
</div>

【解決方法】word-break:break-allを指定

word-break:break-allを指定すると半角英数が折り返されるようになります。

<style>
.example5{
    /*コレ*/word-break: break-all;
    width: 300px;
    border: 1px solid #333;
    padding: 10px;
    background: #abb7fc;
}
</style>
<div class="example5">
    <table border="1">
        <tr>
            <td>セル</td><td>https://csshtml.work/comic001/index.php</td>
        </tr>
    </table>
</div>

word-breakの初期値はnormalであり、これは英単語の途中で改行されないようになっています。

これにより単語の終わりで改行され読みやすくなるというものです。

一方URLのように単語の切れ間がない場合、改行されず親の幅を超えてしまうという不具合を発生させてしまいます。

これを改行させるためにword-break:break-allを指定するものです。

word-breakは継承するためbodyに指定するとサイト全体に効きます。

ただ、word-break:break-allを指定するとすべての英単語が途中で改行されてしまいます。

日本語しかないサイトであれば気になりませんが、英語をよく使うサイトであれば単語途中での折り返しが気になってしまうでしょう。

これを避けるためtable内だけにword-break:break-allを指定するのもいいでしょう。

【まとめ】子要素が親要素をはみ出す原因と解決方法

【原因1】合計widthが100%を超えている

【解決方法1】width:autoにする

【解決方法2】box-sizing:border-boxを指定する

【原因2】半角英数が折り返されない

【解決方法】word-break:break-allを指定

以上、tableなど子要素が親要素をはみ出す原因と解決方法でした。