| 属性名 | overflow overflow-x overflow-y |
|---|---|
| 値 | overflow: <type>{1,2} overflow-x: <type> overflow-y: <type> |
| 値の詳細 | <type> = visible | hidden | scroll | auto | clip |
| 初期値 | visible |
| 適用可能要素 | ブロックレベル要素 |
| 継承 | 継承しない |
| メディア | Visual |
| サポート | https://caniuse.com/mdn-css_properties_overflow |
コンテンツが要素の高さや横幅を超えた場合に、スクロールして表示する、表示しない、はみ出して表示するなどを指定します。overflow: は値を 1～2個指定することができます。1個の場合は横方向、縦方向双方に適用され、2個の場合は横方向、縦方向の順で適用されます。
hidden とほぼ同じ動作ですが、hidden はスクロールアウトした要素が単に見えなくなるだけなのに対し、clip はその要素の存在自体が無くなった様に振舞います。後述の clipの使用例 を参照してください。
.my-box {
border: 1px solid #999999;
width: 400px;
height: 100px;
margin-bottom: 2em;
}
.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-auto { overflow: auto; }
.overflow-clip { overflow: clip; }
<h3">visible</h3> <my-box overflow-visible">Lorem ipsum dolor sit amet, ...</div> <h3">hidden</h3> <my-box overflow-hidden">Lorem ipsum dolor sit amet, ...</div> <h3">scroll</h3> <my-box overflow-scroll">Lorem ipsum dolor sit amet, ...</div> <h3">auto</h3> <my-box overflow-auto">Lorem ipsum dolor sit amet, ...</div> <h3">clip</h3> <my-box overflow-clip">Lorem ipsum dolor sit amet, ...</div>
position:sticky を使用する際、親要素に display:hidden を指定したい場合、hidden を指定してしまうと sticky が効かなくなります。hidden の代わりに display:clip を使用することでこの問題を回避することができます。
.my-clip-example {
width: 400px;
height: 180px;
margin: 8px auto;
border: 1px solid #ccc;
overflow: auto;
.content {
width: 340px;
margin: 24px auto;
border: 1px solid #ccc;
border-radius: 25px;
text-align: center;
background-color: #eee;
.menu {
position: sticky;
top: 0;
padding: 16px;
background-color: #000;
color: #fff;
}
}
}
.overflow-hidden { overflow: hidden; }
.overflow-clip { overflow: clip; }
<div class="my-clip-example">
<div class="content overflow-hidden">
<div class="menu">
MENU#1 / MENU#2
</div>
<div>AAA</div>
<div>AAA</div>
<div>AAA</div>
...
</div>
</div>
<div class="my-clip-example">
<div class="content overflow-clip">
<div class="menu">
MENU#1 / MENU#2
</div>
<div>AAA</div>
<div>AAA</div>
<div>AAA</div>
...
</div>
</div>
上段は hidden を指定しているので sticky が効かずメニューをスクロールアウトしてしまいます。下段は hidden の代わりに clip を指定しているのでメニューが上部に張り付きます。