CODEWITHSUNDEEP
cssgoogle-chromefirefoxflexbox
vcRobe
vcRobe

Reputation: 1771

Unexpected behavior controlling overflow in Flexbox code

I'm trying to create a layout like this:

enter image description here

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:

enter image description here

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

Upvotes: 1

Views: 117

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371003

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:

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:

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>

Upvotes: 1

Related Questions