【CSS】overflow:hiddenやscrollが効かない原因と対応方法

overflowを使うと要素を隠したりスクロールさせることができます。

しかし、ある条件によりoverflowが効かない、うまくいかないことがあります。

CSSのoverflow:hiddenやscrollが効かない原因と対応方法について解説します。

tableをスクロールさせる方法はこちら↓

overflow:hiddenが効かない

overflow:hiddenは要素からはみ出たものを隠すCSSです。

しかしある条件により効かなくなることがあります。

失敗例

<style>
.overflow-wrap{
    border: 1px solid #999;
    width: 200px;
    height: 100px;
    position: relative;
}
.overflow{
    /*コレ*/overflow: hidden;
}    
.overflow-in{
    width: 500px;
    /*コレ*/position: absolute;
    left: 30px;
    top: 30px
}
</style>
<div class="overflow-wrap">
    <div class="overflow">
        <div class="overflow-in">最初テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト最後</div>
    </div>
</div>

overflow:hidden内にposition:absoluteがかかった要素があり、かつ、overflow:hiddenを指定した要素にposition:relativeが指定されていない場合overflow:hiddenが効かず、中身が表示されてしまいます。

成功例

<style>
.overflow-wrap{
    border: 1px solid #999;
    width: 200px;
    height: 100px;
    /*コレ*/position: relative;
    /*コレ*/overflow: hidden;
}
    
.overflow-in{
    width: 500px;
    position: absolute;
    left: 30px;
    top: 30px
}
</style>
<div class="overflow-wrap">
    <div class="overflow-in">最初テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト最後</div>
</div>

overflow:hiddenを指定した要素にposition:relativeを指定してしまえば、position:absoluteの要素もちゃんと隠れます。

なお、この仕様を意図的に利用してoverflow内の要素をはみ出させることも可能です。

overflow-y:scrollが効かない

overflow-y:scrollは縦にスクロールさせるCSSです。

ある条件を満たしていないと縦スクロールされません。

失敗例

<style>
.overflow-y-wrap{
    border: 1px solid #999;
    width: 200px;
    height: 100px;
    padding: 10px;
}
.overflow-y{
    
/*コレ*/overflow-y: scroll;
}
</style>

<div class="overflow-y-wrap">
    <div class="overflow-y">最初テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト最後</div>
</div>

親要素には高さを指定しています。

一方overflow-y:scrollを指定しているのは子要素であり、高さを指定していません。

overflow-y:scrollとheightは同じ要素に指定する必要があります。

成功例

<style>
.overflow-y-wrap{
    border: 1px solid #999;
    width: 200px;
    height: 100px;
    padding: 10px;
}
.overflow-y2{
    overflow-y: scroll;
    
/*コレ*/height: 100%;
}
</style>

<div class="overflow-y-wrap">
    <div class="overflow-y2">最初テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト最後</div>
</div>

ちゃんと指定範囲内だけスクロールされるようになりました。

overflow-x:scrollが効かない

overflow-x:scrollは横にスクロールさせるCSSです。

ある条件を満たしていないと横スクロールされません。

失敗例

<style>
.overflow-x-wrap{
    border: 1px solid #999;
    width: 200px;
    padding: 10px;
    
/*コレ*/overflow-x: scroll;
}
</style>

<div class="overflow-x-wrap">
    <div class="overflow-x">最初テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト最後</div>
</div>

overflow-xは横スクロールのはずなのに横スクロールになっていません。

widthを指定しないと子要素の幅は親要素と同じになります。widthを指定しましょう。

成功例

<style>
.overflow-x-wrap{
    border: 1px solid #999;
    width: 200px;
    padding: 10px;
    overflow-x: scroll;
}
.overflow-x{
    
/*コレ*/width: 500px;
}
</style>

<div class="overflow-x-wrap">
    <div class="overflow-x">最初テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト最後</div>
</div>

内容量に関わらず一行にしたいときはwhite-space:nowrapを指定します。

成功例

<style>
.overflow-x-wrap{
    border: 1px solid #999;
    width: 200px;
    padding: 10px;
    overflow-x: scroll;
}
.overflow-x{
    
/*コレ*/white-space:nowrap
}
</style>

<div class="overflow-x-wrap">
    <div class="overflow-x">最初テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト最後</div>
</div>

その他CSSが効かない場合

上記のどれでもない場合、スペルミスや優先順位のミスなどが考えられます。

下記記事を参考に見直しましょう。

【まとめ】overflowが効かない原因と対応方法

overflow:hiddenが効かない

対応方法：overflow:hiddenを指定した要素にposition:relativeを指定する

overflow-y:scrollが効かない

対応方法：overflow-yを指定した要素にheight（auto以外）を指定する

overflow-x:scrollが効かない

対応方法：子要素にwidthを指定するか、white-space:nowrapを指定する

以上、CSSのoverflowが効かない原因と対応方法でした。