1562039 - Element with "display: grid" or "display:flex" blockifies children even if it's not a grid/flex container (e.g. for <details>)

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Oriol Brufau [:Oriol]]

Testcase

<details style="display: grid; grid-template-columns: auto auto" open>
  <div style="display: inline; background: cyan">bar</div>
  <div style="display: inline; background: orange">baz</div>
</details>

The <details> has display: grid but is not a grid container. This can be exposed with getComputedStyle($0).gridTemplateColumns, which is "auto auto" instead of 2 lengths.

Then the children aren't grid items. This is also noticeable because they appear one below the other instead of side by side.

However, the children are blocks despite having display: inline. This doesn't seem right, I don't think the elements should be blockified if they aren't grid items: https://drafts.csswg.org/css-grid/#grid-item-display

The display value of a grid item is blockified

In Chromium they are inline but that's because there is an anonymous <div> wrapper. If I remove it, the children are blockified too.

Comment 1

[Daniel Holbert [:dholbert]]

This happens for display:flex, too, FWIW. (And I verified with a frame dump that no flex/grid container is generated.)

Comment 2

[Daniel Holbert [:dholbert]]

The specific spec text that matters is here (for flexbox):

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)

https://drafts.csswg.org/css-flexbox-1/#ref-for-propdef-display%E2%91%A5

And the similar text for grid: https://drafts.csswg.org/css-grid-1/#ref-for-propdef-display%E2%91%A4

Comment 3

[Emilio Cobos Álvarez (:emilio)]

I think the fact that all browsers do it like this is not accidental, and I'd prefer to change the spec to match browsers in this case. There's no reason the style engine needs to know about which box an element will eventually generate. Also this matches better the css 2 fixups specified here: https://drafts.csswg.org/css2/visuren.html#dis-pos-flo.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

I filed https://github.com/w3c/csswg-drafts/issues/4065.

Comment 5

[Oriol Brufau [:Oriol]]

Resolved invalid after the spec edits and the CSSWG resolution.