max-height, flex-grow don't work well together -- incorrect size calculations / unallocated space #967

New Issue

2020-02-02T21:12:17-08:00

brianwestphal commented

2020-02-02 21:12:17 -08:00

(Migrated from github.com)

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

http://tinyurl.com/sgeap6b

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.

# Report - [X] I have searched [existing issues](https://github.com/facebook/yoga/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 http://tinyurl.com/sgeap6b 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. <img width="400" alt="Screen Shot 2020-02-03 at 1 04 41 PM" src="https://user-images.githubusercontent.com/7001863/73627067-29426300-4686-11ea-93bb-228f62332484.png">

starFelix commented

2020-03-04 19:06:49 -08:00

(Migrated from github.com)

I have same problem. It seems that flex-grow in yoga only works when parent has a fixed size. I had to add fixed width/height for parent to make it works.

I have same problem. It seems that `flex-grow` in yoga only works when parent has a fixed size. I had to add fixed width/height for parent to make it works.

woehrl01 commented

2020-06-11 08:13:06 -07:00

(Migrated from github.com)

Hi @brianwestphal,

thanks for reporting, the current algorithm doesn't comply correctly to the spec here. I mentioned the underlying problem in more depth in PR #1015 .

Hi @brianwestphal, thanks for reporting, the current algorithm doesn't comply correctly to the spec here. I mentioned the underlying problem in more depth in PR #1015 .

brianwestphal commented

2020-06-16 01:24:44 -07:00

(Migrated from github.com)

Thanks @woehrl01, glad this is being worked on! It's been killing me :)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#967