Bug 270182 – Grid row of height minmax(0, 1fr) collapsing with container-type: inline-size

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Layout and Rendering

Created attachment 470075 [details]
screenshot safari 17.3 browserstack

A grid cell and its grid container are not growing to fit their contents when the grid has `grid-template-rows: minmax(0, 1fr); container-type: inline-size;`.

See minimal reproduction at https://codepen.io/tremby/pen/OJGLmjo which has:

HTML:
<div id="grid">
  <div id="cell">
    This text should be surrounded by the black border and the grey border.
  </div>
</div>

CSS:
#grid {
  border: 5px solid lightgray;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  container-type: inline-size;
}
#cell {
  border: 1px solid black;
}

It is looking as expected (text is surrounded by the black cell border and the grey grid border) in Firefox and Chromium.

Screenshot of Safari 17.3 attached.

This issue is similar to https://bugs.webkit.org/show_bug.cgi?id=256047 and https://bugs.webkit.org/show_bug.cgi?id=260201 and https://bugs.webkit.org/show_bug.cgi?id=266506 but I do not know if it is a duplicate or something different.

[Radar WebKit Bug Importer]

<rdar://problem/124084850>

[Ahmad Saleem]

Created attachment 470741 [details]
STP191 vs Other Browsers

It seems to be fixed in STP191 and all browsers are matching with each other.

[Ahmad Saleem]

Since it is already fixed upstream and in Safari Technology Preview. Marking this as 'Configuration Changed'.

@Reporter - thanks for reporting.