Flexed child with overflow respects parent's max-height in Chrome, not in Firefox

Question

I have a flexbox container with a max-height. It has two children, flexed horizontally, one of which has overflow: auto. In Chrome, the child with overflow stops growing and scrolls once it reaches the container's max-height. In Firefox, it overflows the container.

I'm developing against latest Chrome (currently 59), but must support Firefox 40+, so I'm testing using Firefox 40. For reference, caniuse.com reports that FF40 fully supports flexbox.

This is apparently working properly in newer FF versions, but not in FF40 that I'm using, so for those without access to an older FF, here are screenshots of the behavior I'm seeing:

Firefox 40

Chrome 59

I can resolve this by eliminating the child on the left and setting flex-direction: column on the container, but unfortunately my actual application needs that content on the left and needs it flexed horizontally.

Why the discrepancy across browsers? What's the cross-browser solution to allow the child with overflow to stop growing as it does in Chrome?

div { padding: 10px; }

#container {
  border: 1px solid green;
  display: flex;
  max-height: 200px;
}

#left {
  border: 1px solid purple;
  flex: 1;
}

#right {
  border: 1px solid orange;
  flex: 3;
  overflow: auto;
}

<div id="container">
  <div id="left">
    Left content
  </div>
  <div id="right">
    I stop growing at 200px tall in Chrome, but not in Firefox
    <ul>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
    </ul>
  </div>
</div>

Answer 1

Why the discrepancy across browsers?

The current behavior (i.e. flex items do respect max sizing constraints on their parent flex container) was not in the spec until 2014, which explains why Firefox's behavior originally matched that of IE. This was first brought up by the IE team here, and resolved here. It also means Chrome's behavior was technically a deviation from the spec at the time, even if it was sensible.

The spec has since been updated to match Chrome's sensible behavior, making IE's and Firefox's original behavior non-compliant. Unfortunately, Firefox's implementation wasn't updated until this year with the release of Firefox 51 (even Microsoft Edge shipped with the new behavior first), which is why the old behavior is still present in Firefox 40. And this is why I tend not to rely on compatibility tables for flexbox — things were much less stable three years ago than they are now.

See bug 1000957 in Bugzilla (also linked to in the Fx 51 release notes).

What's the cross-browser solution to allow the child with overflow to stop growing as it does in Chrome?

As you've found, setting max-height on the flex items instead of the flex container is the best you can do, since flex items either respect, or don't, width/height constraints on their flex container. Note that there are borders and padding within your flex container and flex items, so you'll have to account for those when determining the appropriate max-height for your flex items.