1652862 - Flex container doesn't properly shrinkwrap content height, in case with large flex-basis and replaced element (img or canvas)

Status: RESOLVED DUPLICATE of bug 1316534

(Core :: Layout: Flexbox, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

(originally reported as https://github.com/webcompat/web-bugs/issues/55314 )

STR:

1. Load attached testcase.

EXPECTED RESULTS:
The teal box should be tall enough to contain the purple canvas.

ACTUAL RESULTS:
The teal box is not tall enough to contain the purple canvas.

This might be a subtle version of bug 1136312 (note that if I add "min-width:50%" on the canvas, we get the expected result), so setting that as a dependency.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (compare to Chrome)

For the record: if I remove height:100% from the canvas, then it shrinks to fit inside the teal-bordered area (and both are relatively small).

Chrome renders this testcase the same way as they render testcase 1, though (with the canvas fitting but with it & the teal-bordered area being taller).

Comment 2

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: Firefox 83 (local build) vs Chrome 87.png

Attached a screenshot of the testcase in comment 0. This should be fixed by bug 1316534.