Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

min-height combined with flex produces incorrect height #1770

Open
1 task done
robbert-ef opened this issue Dec 17, 2024 · 0 comments
Open
1 task done

min-height combined with flex produces incorrect height #1770

robbert-ef opened this issue Dec 17, 2024 · 0 comments

Comments

@robbert-ef
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants