Bug 227604 - `flex-basis` behaves unexpectedly with children using `max-height: fit-content;`
Summary: `flex-basis` behaves unexpectedly with children using `max-height: fit-content;`
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Blocks: 227605
  Show dependency treegraph
Reported: 2021-07-01 17:19 PDT by Patrick Angle
Modified: 2021-07-08 17:20 PDT (History)
5 users (show)

See Also:

Screen Recording of Issue (19.65 MB, video/quicktime)
2021-07-01 17:19 PDT, Patrick Angle
no flags Details
Test Case to Reproduce Issue (2.88 KB, text/html)
2021-07-01 17:19 PDT, Patrick Angle
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Patrick Angle 2021-07-01 17:19:19 PDT
Created attachment 432754 [details]
Screen Recording of Issue

Applying a flex-basis of 100% to a children of a flex container behaves as expected when first applied, but if a media query causes that style to "go away" and come back, the results are different than when the 100% was initially applied. See attached video and reproduction page.

Steps to reproduce:
1. Open the attached reproduction page.
2. Size the window to just taller than 600px (you should see four stacked colorful divs)
3. Check the box to change the flex-basis to `100%` from `inherit`.
4. Reduce the window height until the colorful boxes become boring text.
5. Resize the window back to taller than 600px.
6. Observe that only the yellow div is visible, the others are all 0px tall now, despite having the same style applied as when we started resizing the window.

Reproduces on ToT WebKit. I can not reproduce this prior to r279271, but that issue may simply have been masking this problem.
Comment 1 Patrick Angle 2021-07-01 17:19:49 PDT
Created attachment 432755 [details]
Test Case to Reproduce Issue
Comment 2 Radar WebKit Bug Importer 2021-07-08 17:20:41 PDT