react / react/yoga

min-height combined with flex produces incorrect height

Open
#1,770 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Algorithm
Dominant language
C++
Stars
18.9k
Forks
1.6k
Avg merge
1m
Merged PRs (30d)
1

Description

Report

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>

image

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>

image

Actual Behavior

The min-height is added to the calculated height, same as padding would do.

Link to Code

https://www.yogalayout.dev/playground?code=DwGQhgng9grgLgPgFAAIXAHJQCYFMUDOcEANrgLwDelA7gJbZwAWAXCgEwCsADADQpNcdAOZM4bACzduAXxnI0i9FjyFiZKpQBmZAB5t20-gFs6AOwASQ0eJQBGaXJQB6BUuU58RUhWo7c+hyOMi5uwM4quMjh4NDwCEA

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.