インターネット・テクノロジー（略してIT）が手取り足取り動かせる、ユゲタです。
ツール開発をしている時に、cssが思ったとおり動いてくれない時ってありますよね？
今回のターゲットは、CSSの「overflow」機能について、想定した動きをしてくれなかったので、深堀り調査してみたいと思います。
overflowは、はみ出した部分をどうするか設定
overflowについてよく知らないという人は、基本的な仕様を、リファレンスサイトを見て理解しますよう。
https://developer.mozilla.org/ja/docs/Web/CSS/overflow
サンプル
<div class='outside'>
<div class='inside'>□□□□□□□□□□
□□□□□□□□□□
□□□□□□□□□□
□□□□□□□□□□
□□□□□□□□□□
□□□□□□□□□□</div>
</div>
<style>
.outside{
border:4px solid red;
width:100px;
height:100px;
}
.inside{
width:200px;
height:200px;
border:1px solid black;
font-size:20px;
}
</style>
赤枠の中にワザとはみ出るように要素を置いてみました。
overflow:hidden
これを、外枠にoverflow:hiddenを設定すると、
はみ出していた部分が非表示になります。
デフォルトは、overflow:visibleなんですね。
overflow-visible、overflow-y:hidden
そしてこのoverflowには、xとyの設定があり、yをhiddenにしてxをvisibleにすると、
x方向ははみ出て表示するのかと思ったら、スクロール対応になってしまいました。
スクロール指定していないのに・・・orz
回避方法
これをx軸だけをはみ出して表示する方法がありました。
次のように設定してみましょう。
.outside{
overflow-x:visible;
overflow-y:clip;
}
う〜ん、見事に想定通りの動きをするようになりました。
x軸、y軸のどちらかにhiddenが入ると強制的にscrollになってしまうんですね。
なのでclipという切り取り設定にすることで、軸単位での非表示が可能になったという事です。
そもそもこれまでhiddenを使っていたんですが、非表示にはclipを使ったほうがいいのかもしれないな〜と、
意外とみんなが知らない、基本的な使い方を学んだ、ユゲタでした。
