今日少しハマったので備忘録としてまとめました。
CSS の overflow-x プロパティを使って、要素からはみ出た分を横スクロールで表示しようとしたところ、思った通りに動作せず…。
ただし、スクロールバーだけは表示されていたので、overflow-x: scroll; は効いていたようです。
で、原因が分からなかったので検索したところ、下記の記事がヒットしました。
CSSのoverflowを使ってはみ出た表示の指定方法 | TechAcademyマガジン
https://techacademy.jp/magazine/9428
こちらの記事によると、横スクロールを実装する際には、要素に white-space:nowrap; を追加する必要があるとのことでした。
こちらは要素内で自動的に改行しないようにするためのプロパティです。
具体的なコードは下記のとおりです。
div {
padding : 10px;
height: 200px;
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
}
上記コードでは、縦スクロールは禁止し、横スクロールを強制にしています。
で、6行目の white-space:nowrap; を追加したところ、問題なく動作しました！
確かに要素内で改行が発生してしまっておりましたが、その解決策が分からなかったんですよね。
以上、要素の横スクロールが効かない時の対処法でした。
縦スクロールを実装するときには、単純に overflow-y: scroll; を追加すれば動くことが多かったので、手こずってしまいました。
どなたかの参考になれば幸いです。
