Failing web compatibility for combination of flexing, min/max width, and percentage flex basis
Open
Nobody has claimed this yet.
Algorithm
- Dominant language
- C++
- Stars
- 18.9k
- Forks
- 1.6k
- Avg merge
- 1m
- Merged PRs (30d)
- 1
Description
Report
Something is not behaving as expected when compibing min/max width with percentage flex basis and flex-grow.
Issues and Steps to Reproduce
The following test fixture does not pass web compatibility tests.
<div id="flex_grow_flex_basis_percent_min_max" style="width: 120px; flex-direction: row;">
<div style="flex-grow: 1; flex-shrink: 0; flex-basis: 0px; height: 20px; min-width: 60px;"></div>
<div style="flex-grow: 1; flex-shrink: 0; flex-basis: 50%; height: 20px; max-width: 20px; width: 20px;"></div>
</div>
Expected Behavior
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the supplied HTML fixture for flex_grow_flex_basis_percent_min_max and compare its result with the expected behavior in the linked JSFiddle. Trace the flex layout handling for percentage flex-basis together with min-width, max-width, and flex-grow, then verify that the fixture passes web compatibility tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100