概要
同じ要素に対して、overflow-x, overflow-yのどちらも指定するといったことを実現したかったが、効かなかったので、調べてみました。
CSS Overflow Module Level 3の仕様書によると、「overflow-xとoverflow-yのどちらかがvisible以外に指定されていると、もう片方はvisibleを指定しても、内部ではautoとして扱う」ということになっています。
つまりは、思っていることをそのまま実現することは不可能そうです。
だがしかし解決策はある
良いかどうかは別として、以下のような解決方法がある模様です。
- 要素を適当なタグでラッピングして親要素、子要素にそれぞれ overflow-x, overflow-y を片方ずつ指定する
そのほかにもありそう？後々困ったら調べることにします。
参考
https://triple-underscore.github.io/css-overflow3-ja.html#overflow-properties
https://teratail.com/questions/138138