a-little-log

コードブロックにoverflow-x:autoをかけてスクロールさせようとした時に悩んで時間を無駄にしてしまったので覚書として残します。
highlight.jsのcssを読み込んでいると、下記のように<code>にoverflow-xをかけてくれます。これがうまく動作しなくて困ってしまいました。

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
}

確かめること

gridやflexでもwidthの指定は必須

大抵のミスがスクロールさせたい要素にwidthやmax-widthを指定していないことなのはなんとなくわかっていましたが、overflow-x:autoをかけたい要素がgridやflexの中にある場合も、スクロールさせたい要素自体や親要素に明確にwidthを指定しないとスクロールせずにどこまでも突き抜けていきます。スクロールさせたい要素自体の幅を必ず指定する必要が出てきます。多分要素の幅が自由に伸縮してしまうからだと思います。
例えば私はよくブログのような2カラムのレイアウトでgridを利用します。下記のようにサイドバーの幅を固定し、メインコンテンツは適時伸縮するように設定します。

.wrapper {
    display: grid;
    grid-template-column: auto 240px;
}

これでautoを指定している要素の中にoverflow-x:autoにしたい要素が入っていると、どこからスクロールして良いかわからずに要素がどこまでも突き抜けていくようです。flexでも同様です。例えばflex:1を指定している要素の中にスクロール要素が入っている場合、widthの指定が必要です。スクロールさせたい要素が勝手に空気を読んでくれると思っていましたが、ダメなようです。
定期的に沼にハマってしまうので、忘れないようにしたいです。