min-height combined with flex produces incorrect height #1770

New Issue

2024-12-17T03:42:01-08:00

robbert-ef commented

2024-12-17 03:42:01 -08:00

(Migrated from github.com)

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

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

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/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: ```html <Layout> <Node style={{width: 250, height: 400}}> <Node style={{flex: 200, minHeight: 100}} /> <Node style={{flex: 200}} /> </Node> </Layout> ``` ![image](https://github.com/user-attachments/assets/858e81b8-4857-4abd-916d-1f855b37660f) # Expected Behavior `min-height` is respected, similar to CSS flexbox: ```html <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](https://github.com/user-attachments/assets/4f0ba786-72f8-4079-a916-823009c4a63a) # 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 in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1770