Q. Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになった

次の報告がされているが仕様だと回答されている。

https://issues.chromium.org/issues/338601202

次のようなケースを考える。

1
.container {
2
  display: grid;
3
  grid-template-columns: 1fr;
4
  width: 200px;
5
  height: 200px;
6
}
7

8
.item {
9
  aspect-ratio: 2 / 1;
10
}

次のような解釈が行われる。

• コンテナやアイテムに align 属性が指定されていないため、初期値である normal（stretch とほぼ等価）が適用され、アイテムは縦軸に伸縮しようとする。
• アイテムに高さと幅の指定がないため、アイテムは縦軸いっぱいに伸びる。
• 高さ（H）が決定されたので、次にアイテムの aspect-ratio が評価され、幅が高さの 2 倍（W = 2H）になる。
• 1fr は minmax(auto, 1fr)に展開される。
• アイテムの大きさは aspect-ratio で固定されているので、minmax(W, 1fr)相当になる。

W は、コンテナの大きさを超えているのでオーバーフローが起きる。

回避策

• 1fr ではなく、minmax(0, 1fr)を利用する
• アイテムに min-width<0> を指定する。
• アイテムやコンテナに align 系のプロパティを指定する。