CSS Display defines blockification as such:
blockification [...] sets the box’s outer display type, if it is not none or contents, to block [...]
Some trivial examples:
- A flex item with
display: block (i.e. block flow) remains block flow (and establishes a BFC).
- A flex item with
display: inline (i.e. inline flow) becomes block flow (and establishes a BFC).
- A flex item with
display: inline-block (i.e. inline flow-root) becomes block flow-root.
- A flex item with
display: flow-root (i.e. block flow-root) remains block flow-root.
- A flex item with
display: table-cell (i.e. table-cell flow-root) becomes block flow-root.
Note: Edge generates anonymous table parents instead, according to an old Flexbox spec.
- A flex item with
display: table is especially defined in CSS Flexbox.
But now the interesting part:
- A flex item with
display: table-row (i.e. table-row table-row) becomes block table-row.
But this combination is not defined! How is it supposed to behave?
Firefox and Chrome seem to treat it like display: block. Edge still generates an anonymous parent table. https://jsfiddle.net/sn6y4y0m/1/
I think CSS Display should say that, when a box is blockified, if its inner display type is layout-internal, then it becomes flow or flow-root.
CSS Display defines blockification as such:
Some trivial examples:
display: block(i.e.block flow) remainsblock flow(and establishes a BFC).display: inline(i.e.inline flow) becomesblock flow(and establishes a BFC).display: inline-block(i.e.inline flow-root) becomesblock flow-root.display: flow-root(i.e.block flow-root) remainsblock flow-root.display: table-cell(i.e.table-cell flow-root) becomesblock flow-root.Note: Edge generates anonymous table parents instead, according to an old Flexbox spec.
display: tableis especially defined in CSS Flexbox.But now the interesting part:
display: table-row(i.e.table-row table-row) becomesblock table-row.But this combination is not defined! How is it supposed to behave?
Firefox and Chrome seem to treat it like
display: block. Edge still generates an anonymous parent table. https://jsfiddle.net/sn6y4y0m/1/I think CSS Display should say that, when a box is blockified, if its inner display type is layout-internal, then it becomes
floworflow-root.