Unexpected behavior controlling overflow in Flexbox code

Question

I'm trying to create a layout like this:

The top div has a fixed height of 100px, the bottom div has a fixed height of 50px and the div in between use the available space of the window.

Here's the code:

html body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.flex-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.topRow {
  background-color: gray;
  height: 100px;
  border: 2px solid black;
}

.bottomRow {
  background-color: cadetblue;
  border: 2px solid black;
  height: 50px;
}

.content {
  background-color: orange;
  border: 2px solid black;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="flex-grid">
  <div class="topRow">Top div</div>
  <div class="content">
    <div>
      <p>First column</p>
    </div>
    <div style="display:flex; flex-direction:column; overflow-y: scroll; background-color: azure">
      <p>first row</p>
      <p>2 row</p>
      <p>3 row</p>
      <p>4 row</p>
      <p>5 row</p>
      <p>6 row</p>
      <p>7 row</p>
      <p>8 row</p>
      <p>9 row</p>
      <p>10 row</p>
      <p>11 row</p>
      <p>12 row</p>
      <p>13 row</p>
      <p>14 row</p>
      <p>15 row</p>
      <p>16 row</p>
      <p>17 row</p>
      <p>18 row</p>
      <p>19 row</p>
      <p>20 row</p>
      <p>3-1 row</p>
      <p>3r2 row</p>
      <p>3r3 row</p>
      <p>3r4 row</p>
      <p>3r5 row</p>
      <p>3r6 row</p>
      <p>3r7 row</p>
      <p>last row</p>
    </div>
    <div>
      <p>The last column</p>
    </div>
  </div>
  <div class="bottomRow">Bottom div</div>
</div>

If I run this code in Chrome (Version 70.0.3538.77 (Official Build) (64-bit)) in Windows 10 x64 it works as I expect however when I run it in Firefox (Version 63.0.1 (64-bit) (Official Build)) in the same Windows 10 it doesn't work as expected.

Here's the result in Firefox:

As you can see the top div don't have a 100px height and the bottom div is out of the browser's window. Also the white column ignore the overflow-y: scroll

Can anyone please tell me what I'm doing wrong that it doesn't work in Firefox?

PD: I've also tested the same code in Firefox 57 and I get the same result as in Firefox 63.0.1

Answer 1

flex-shrink

An initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink in order to prevent overflow of the container. You can disable this feature with flex-shrink: 0.

.topRow {
   height: 100px;
   flex-shrink: 0;
}

OR

.topRow {
   flex: 0 0 100px; /* flex-grow, flex-shrink, flex-basis */
}

For more details, see the The flex-shrink factor section in my answer here:

• What are the differences between flex-basis and width?

---

min-height: auto

An initial setting of flex container is min-height: auto. This means that flex items cannot be smaller than the height of their content. To override this setting use min-height: 0 or overflow: auto.

.content {
   overflow: auto;
}

See this post for more details:

• Why don't flex items shrink past content size?

To understand why your layout worked in Chrome but not Firefox, see the Browser Rendering Notes section in my answer to the post above.

---

jsFiddle demo

 .flex-grid {
   display: flex;
   flex-direction: column;
   height: 100vh;
 }

 .topRow {
   background-color: gray;
   height: 100px;
   flex-shrink: 0; /* new */
   border: 2px solid black;
 }

 .bottomRow {
   background-color: cadetblue;
   border: 2px solid black;
   /* height: 50px; */
   flex: 0 0 50px; /* new */
 }

 .content {
   background-color: orange;
   border: 2px solid black;
   flex: 1;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   overflow: auto; /* new */
 }

 body {
   margin: 0;
 }

<div class="flex-grid">
  <div class="topRow">Top div</div>
  <div class="content">
    <div>
      <p>First column</p>
    </div>
    <div style="display:flex; flex-direction:column; overflow-y: scroll; background-color: azure">
      <p>first row</p>
      <p>2 row</p>
      <p>3 row</p>
      <p>4 row</p>
      <p>5 row</p>
      <p>6 row</p>
      <p>7 row</p>
      <p>8 row</p>
      <p>9 row</p>
      <p>10 row</p>
      <p>11 row</p>
      <p>12 row</p>
      <p>13 row</p>
      <p>14 row</p>
      <p>15 row</p>
      <p>16 row</p>
      <p>17 row</p>
      <p>18 row</p>
      <p>19 row</p>
      <p>20 row</p>
      <p>3-1 row</p>
      <p>3r2 row</p>
      <p>3r3 row</p>
      <p>3r4 row</p>
      <p>3r5 row</p>
      <p>3r6 row</p>
      <p>3r7 row</p>
      <p>last row</p>
    </div>
    <div>
      <p>The last column</p>
    </div>
  </div>
  <div class="bottomRow">Bottom div</div>
</div>