display flex と over-flow auto を併用すると横スクロールできなくなった話と解決策

display: flex;
overflow-x: auto;

上記二つを併用したときに、横スクロール内の左側の要素が画面内に入ってこなくなる問題でドツボにはまったので解決策をメモ。

結論を先に言うと、上記二つというか、中央寄せしたいがために

justify-content: center;

を使っていたから横スクロールがバグっていました。。。

何をしたかったか

要素を横並びにして、ウィンドウ幅を縮めていき、横並びにした要素の横幅を下回ると自動的に横スクロールが始まる仕様を想定しています。

ここでは、横並びの要素は中央寄せにしたい場合を考えます。

ソースを見てみる（うまくいかない ver.）

HTML

<ul class="sample_NG">
	<li><img src="https://placehold.jp/50/3d4070/ffffff/400x200.png?text=いろいろ要素" alt=""></li>
	<li><img src="https://placehold.jp/50/3d4070/ffffff/150x400.png?text=いろいろ要素" alt=""></li>
	<li><img src="https://placehold.jp/50/3d4070/ffffff/500x300.png?text=いろいろ要素" alt=""></li>
	<li><img src="https://placehold.jp/50/3d4070/ffffff/200x300.png?text=いろいろ要素" alt=""></li>
</ul>

css

.sample_NG {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: auto;
}

デモ

• 
• 
• 
• 

スクロール内の左側の要素が隠れてしまって画面に入ってこない状態です。

これがなかなか解決できず苦労しました。

それでは、解決策を見ていきましょう。

ソースを見てみる（うまくいく ver.）

HTML

<div class="sample_OK_wrapper">
	<ul class="sample_OK">
		<li><img src="https://placehold.jp/50/3d4070/ffffff/400x200.png?text=いろいろ要素" alt=""></li>
		<li><img src="https://placehold.jp/50/3d4070/ffffff/150x400.png?text=いろいろ要素" alt=""></li>
		<li><img src="https://placehold.jp/50/3d4070/ffffff/500x300.png?text=いろいろ要素" alt=""></li>
		<li><img src="https://placehold.jp/50/3d4070/ffffff/200x300.png?text=いろいろ要素" alt=""></li>
	</ul>
</div>

css

.sample_OK_wrapper {
	overflow-x: auto;
	margin: 0 1.25rem; /* ←ちょっと注意（後述）*/
}
.sample_OK {
	display: inline-flex;
	align-items: center;

	/* justify-content: center; ←左側が画面に入ってこない原因 */
	/* overflow-x: auto; ←ここに付けてもスクロールしない*/
}

デモ

何が違うか

「うまくいかない ver.」と「うまくいく ver.」の違いは、

1. <div> で囲む
2. ↑この <div> に overflow-x: auto; を付ける
3. 中央寄せにしたいので display: flex; ではなく display: inline-flex; を使う
4. 中央寄せにしたいので ① の <div> に text-align: center; を付ける

です。

ちょっと注意

上記の「うまくいく ver.」の囲った <div> に

margin: 0 1.25rem;

を付けていますが、これは横スクロール内の要素の左右の余白を空け、画面との余白を作るためのものです。

ただし、これを、

padding: 0 1.25rem;

としてしまうと、横スクロール内の padding の右端でスクロールが止まってしまい、画面との余白を空けることができなくなってしまいます。

上記の二つのデモをじっくり見比べていただくと分かるかと思いますが、横スクロール内の要素の左右の余白の有無が確認できます。

この部分に関しては貴殿の制作中のサイトにあわせて臨機応変に対応してください。m(__)m

今回は以上です。

ありがとうございました。m(__)m