9

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 enter image description here

Chrome 59 enter image description here

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>
Matt
  • 23,363
  • 39
  • 111
  • 152
  • 1
    I'm getting the exact same behavior on Chrome, Firefox and Edge. Not seeing any difference. – Michael Benjamin Jun 21 '17 at 19:14
  • 1
    I should have reported that I'm using Firefox 40 and Chrome 58. So my FF version is a bit older, but caniuse.com does say flexbox is fully supported. – Matt Jun 21 '17 at 19:19
  • 1
    Consider this possibility: https://stackoverflow.com/q/36247140/3597276 – Michael Benjamin Jun 21 '17 at 19:20
  • Thanks, but I don't think that post addresses my issue. – Matt Jun 21 '17 at 19:22
  • Your title: *Flexed child with overflow respects parent's max-height in Chrome, not in Firefox* ... I think the referenced post precisely addresses your problem. In fact, it may be duplicate. – Michael Benjamin Jun 21 '17 at 19:25
  • _Why the discrepancy across browsers?_ Vendors interpretation of how to apply a module's rules, but I'm sure you are aware of this, and bugs ... do I have to say more :) ... try out the suggested fix and let us know how it worked – Asons Jun 21 '17 at 20:14
  • After looking again, no, I don't see the applicability to my issue. The linked post discusses minimum sizing algorithms with flexed items. My issue deals with flexed items overflowing parent containers. @Michael_B You may be seeing a solution in that post that I am not. If so, can you apply the answer from that post to my solution and post here as an answer? Thanks. – Matt Jun 22 '17 at 12:17
  • Matt, I would be happy to help, but I don't have access to Firefox 40 on this PC. – Michael Benjamin Jun 22 '17 at 12:47
  • Also, since a flex item by default cannot be smaller than the size of its content, the `overflow` property will not work and the item can overflow the parent container. The linked reference tells you how to override that behavior. – Michael Benjamin Jun 22 '17 at 12:49
  • Add this to your code: `* { min-height: 0 !important; min-width: 0 !important; }` ... If that works, or sets you on the right path, the linked reference is valid. – Michael Benjamin Jun 22 '17 at 12:53
  • @Michael_B No, unfortunately that has not helped. Same behavior. – Matt Jun 25 '17 at 13:35
  • wouldn't just be easier to update firefox? FF40 really?? its already in FF53, so 13 versions outdated – dippas Jun 25 '17 at 16:14
  • 2
    @dippas Your suggestion isn't helpful. My question states that I must support that browser version, which implies it's not my decision. More background: I'm not in control of minimum browser requirements for this particular application. It's dictated by my customer. I have no authority to change this or make suggestions to change it. – Matt Jun 25 '17 at 16:41
  • 2
    @Michael_B: Different issue. The question you link to describes content overflowing their flex item parents with min sizing constraints (and the workaround you suggested says as much), this has to do with flex items overflowing their parent flex containers with max sizing constraints. – BoltClock Jun 26 '17 at 08:12

1 Answers1

14

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356