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

[brianwestphal]

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.

[starFelix]

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]

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]

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