1542148 - Flexbox overlap with vertical text

Status: RESOLVED DUPLICATE of bug 1473789

(Core :: Layout: Block and Inline, defect)

Description

[niko.elmari]

Attachment: Flex bug.zip

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

Steps to reproduce:

Check sample from:
https://jsfiddle.net/Risord/z7ceumja/

Bonus:

1. Open developer tools
2. Navigate to span.inline element with inspector
3. Disable and enable border rule from css editor (and try disabling+enabling other rules)

Actual results:

Elements overlap (FF result.png)

After css bonus step elments are far away from each other without good reason (FF result 2.png). Disabling and enabling different rule cause always different result. This can be unrelated bug.

Expected results:

Elements should stack next to each other like in Chrome (Chrome result.png).

Comment 1

[Daniel Holbert [:dholbert]]

Thanks for the bug report!

This actually isn't flexbox-dependent -- it's just an intrinsic block-sizing bug. For example, I can reproduce the same issue if I use float:left on the first flex item (and remove the display:flex styling on the container element). Here's a version of the jsfiddle with that: https://jsfiddle.net/a9nrfm6s/

I think this is basically a duplicate of bug 1473789. As noted in that bug's title, behavior does change from reflow to reflow (depending on whether we've previously laid out the orthogonal-flow element), which explains the behavior difference after style changes that was noted near the end of comment 0 here.