Omg, this is so good!

Do you have plans to continue working on this to get as close as possible to the specification? The edge cases are actually pretty important, this is what will make React Native able to run on web. It also makes my life easier as I can just redirect people to the browser/css spec when they have an issue.

Yay!!

Unless I hit a bug in practice, I'm not expecting to submit another pull request in the next week or so. Longer term, I expect I'll revisit that - a 100% complete implementation of the CSS box model is just too sweet a target for my left brain to ignore :-)

I submitted what I had because it seemed to be working for all the common cases, and I was hitting a point of diminishing returns tracking down edge cases. Part of the problem is that some of the browser behaviours I was seeing didn't appear to make sense, and were inconsistent between browsers, and it wasn't clear if that was a problem with specific browser implementations.

What I really need is an analog of the old ACID2 test, but for flexbox - a complex and spanning demonstration of the CSS box model that has been vetted for correctness.

I've been making bug reports on the browsers for behaviors that seemed completely wrong. Would be nice to do the same and add those in comments.

I also hope that the tests in this repo will help make a corpus of compliance tests if anyone wants to build another layout implementation

💰 💰 💰

Does the maxWidth/maxHeight still kick in on boxes with a non-zero flex value?

Do these properties mean flexBasis is unnecessary?

Yes, maxWidth/maxHeight applies to boxes with non-zero flex values. The max/min width will override any flex weight-based allocation of width, effectively removing the element from the flex calculation.

I suppose flexBasis could be used as an alternative to minWidth/Height in most common scenarios; but I'm guessing there will be some subtle edge cases where they don't give the same result.

I took a closer look at there are some legitimate use cases that are not working right now and should.

  it('should layout minHeight with a flex child', function() {
    testLayout(
      {style: {minHeight: 800}, children: [
        {style: {flex: 1}}
      ]},
      {width: 0, height: 800, top: 0, left: 0, children: [
        {width: 0, height: 800, top: 0, left: 0}
      ]}
    );
  });

In the current implementation, the height of the first child is 0.

We really need to fix most of the edge cases before using it. Otherwise, people are going to be super confused and think that it's broken :(

I've just added PR #68 that corrects this problem.

The other test introduced in b912acf is another matter; I'll leave a comment on that commit.