min-height combined with flex produces incorrect height
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
- I have searched existing issues and this is not a duplicate
Issues and Steps to Reproduce
When min-height is combined with flex, the size of the node is calculated wrong:
<Layout>
<Node style={{width: 250, height: 400}}>
<Node style={{flex: 200, minHeight: 100}} />
<Node style={{flex: 200}} />
</Node>
</Layout>
Expected Behavior
min-height is respected, similar to CSS flexbox:
<div style="display: flex; flex-direction: column; border: 1px solid; width: 250px; height: 400px;">
<div style="border: 1px solid; flex: 200; min-height: 100px"></div>
<div style="border: 1px solid; flex: 200;"></div>
</div>
Actual Behavior
The min-height is added to the calculated height, same as padding would do.
Link to Code
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 by reproducing the reported case in the linked Yoga playground and compare its result with the CSS flexbox example. Trace the layout calculation for a flex node with min-height, then identify the relevant regression-test location in the repository. Done means min-height is respected without being added to the calculated height, matching the expected CSS behavior.
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
- Mostly clear
- Newbie friendliness
- 45/100