朗報！ CSS Flexboxの8年越しのバグがようやく修正されます
Post on:2023年8月7日
sponsors
CSS Flexboxのこのバグに悩んだ人もいると思います。
リスト要素をFlexboxで複数列に配置し、ulにborderを適用したのに、ボーダーが全体を囲まないバグが8年越しにようやく修正されます。
左: バグ、右: 期待する表示
まずは、そのバグが確認できるデモをご覧ください。
すべてのアイテムはul内のliで実装されており、CSSでulにborder: 1px solid red;を設定しています。
しかし、ボーダーはリスト全体ではなく左端の1列のみに適用されます。このバグは現在、Chrome, Safari, Firefoxで確認できます。
参考: Issue 507397
※上記ではEdge（non chromium version）は期待通りに表示されるとあり、Edge 115（chromium version）ではバグで表示されます。
See the Pen
"flex-flow: column wrap" Bug by coliss (@coliss)
on CodePen.
HTMLは、下記の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Ten</li> </ul> |
CSSは、下記の通り。
ulにborder: 1px solid red;を設定して、全体にボーダーを適用していますが、Chrome, Safari, Firefoxでは期待通りに表示されません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ul { background: hsla(0,100%,50%,.1); border: 1px solid red; display: inline-flex; flex-flow: column wrap; list-style: none; margin: 0; max-height: 12em; padding: .5em 0 0 .5em; } li { background: hsla(0,0%,0%,.1); margin: 0 .5em .5em 0; padding: .5em; } |
原因は、Flexコンテナの幅と高さがflex-flow: column wrap;に対して誤って計算されるからです。この場合、左端のみに適用されます。
flex-flowについて詳しくは、CSS Flexbox 各プロパティの使い方を詳しく解説をご覧ください。
Chrome 116（8/9リリース予定）でこのバグが修正される予定です。
各ブラウザの表示をご覧ください。
Chrome 115での表示
Safari 16.6での表示
Chrome Canaryではすでに期待通りに表示されます。
Chrome Canaryでの表示
元ネタは、下記ツイ、、、ポスト？より。
a browser engineer is timid about this change and would love if you could check any of your
inline-flexlayouts that have a max-height set on them, to see if this regresses the layout for you or if it's all good 🙏🏻it's a bug in all 3 engines! https://t.co/tV80FZGBL4
— Adam Argyle (@argyleink) June 13, 2023
sponsors
