max-height, flex-grow don't work well together -- incorrect size calculations / unallocated space
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 18.9k
- Forks
- 1.6k
- Avg merge
- 1m
- Merged PRs (30d)
- 1
Description
Report
- I have searched existing issues and this is not a duplicate
Issues and Steps to Reproduce
See http://tinyurl.com/sgeap6b
When allocating space combining min/max height and flex-grow, space is often left unallocated inside a flex box.
Expected Behavior
No unallocated space
Actual Behavior
Unallocated space at the bottom of the container
Link to Code
Notice that the space at the bottom is in the container and doesn't contain a child component -- even though the largest sub-component has a 1000px max-height.
Running the same flex layout parameters in a web browser (e.g. safari and chrome) works as expected, without unallocated space. And according to the documentation, the implementations should be largely compatible between the web and react-native.
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
Start with the linked reproduction at http://tinyurl.com/sgeap6b and compare Yoga's layout result with the browser behavior described in the issue. Trace the min/max-height and flex-grow size allocation, and consider the issue done when the container has no unallocated bottom space for the reported parameters.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100