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

261文字
1分
編集
#CSS

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

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

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

css
.container {
  display: grid;
  grid-template-columns: 1fr;
  width: 200px;
  height: 200px;
}

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

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

  • コンテナやアイテムに 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 系のプロパティを指定する。