Overflow of item inside nested flex containers in Firefox

Question

I have a page where the body is a column flex container, with a header, a footer and a main container in the middle. This main container is also a flex container, in row this time, with two divs side by side. In the div on the left hand side there will be a svg container. Its dimensions will be set by jQuery to fit the space available. The div on the right will receive text of variable length. I need the svg to remain on the screen on the time without moving, so I want the div to the right to scroll if there's too much content in it.

Here's my code :

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  text-align: center;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
#top {
  background-color: #005200;
  color: white;
}
#bottom {
  background-color: #BC0203;
  color: white;
}
#middle {
  flex-grow: 2;
  background-color: #FD9800;
  display: flex;
  flex-direction: row;
}
#left {
  width: 50%;
  border-right: 1px solid black;
}
#right {
  width: 50%;
  overflow-y: auto;
}

<div id="top">
  <h1>If you're the big tree</h1>
</div>
<div id="middle">
  <div id="left">
    We are the small axe
    <!--SVG will go here -->
  </div>
  <div id="right">
    <p>
      Ready
      <br>
      <br>
      <br>
      <br>to
      <br>
      <br>
      <br>
      <br>cut
      <br>
      <br>
      <br>
      <br>you
      <br>
      <br>
      <br>
      <br>down
    </p>
  </div>
</div>
<div id="bottom"><em>To cut you down</em>
</div>

I can get the middle container to scroll, but not the item to the right. I guess that's because I can't give the middle container a maximum height, since it's set by flex.

actually... Isn't this code just doing what you're asking for? — I.G. Pascual, Jan 27 '17 at 10:32
Not in firefox 50.1.0 at least. When I reduce the height of the browser's window, the body overflows and shows a scrollbar. But what I want is #right to overflow and show a scrollbar, while keeping all other elements in place. — GuitarExtended, Jan 27 '17 at 10:37

score 1 · Accepted Answer · edited May 23 '17 at 11:53

I could solve it adding overflow-y: auto; to your #middle element. Seems like flex is not taking into account that max-height: 100% for Firefox. If you remove it makes no difference.

Btw, I got the idea tweaking a little a jsFiddle I found in the question flexbox misbehaving with max-height

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  text-align: center;
  display: flex;
  flex-direction: column;
}
#top {
  background-color: #005200;
  color: white;
}
#bottom {
  background-color: #BC0203;
  color: white;
}
#middle {
  flex-grow: 2;
  background-color: #FD9800;
  display: flex;
  flex-direction: row;
  overflow-y: auto;
}
#left {
  width: 50%;
  border-right: 1px solid black;
}
#right {
  width: 50%;
  overflow-y: auto;
}

<div id="top">
  <h1>If you're the big tree</h1>
</div>
<div id="middle">
  <div id="left">
    We are the small axe
    <!--SVG will go here -->
  </div>
  <div id="right">
    <p>
      Ready
      <br>
      <br>
      <br>
      <br>to
      <br>
      <br>
      <br>
      <br>cut
      <br>
      <br>
      <br>
      <br>you
      <br>
      <br>
      <br>
      <br>down
    </p>
  </div>
</div>
<div id="bottom"><em>To cut you down</em>
</div>

Overflow of item inside nested flex containers in Firefox

1 Answers1