朗報！ 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は、下記の通り。

<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>

<ul>

<li>Three</li>

<li>Seven</li>

<li>Eight</li>

</ul>

CSSは、下記の通り。
ulにborder: 1px solid red;を設定して、全体にボーダーを適用していますが、Chrome, Safari, Firefoxでは期待通りに表示されません。

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;
}

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-flex layouts 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