Not able to scroll overflow flex container in Firefox

Question

I'm trying to create an application like layout with CSS3 flexbox (header bar, sidebar and content), where only the content wrapper should have larger content than the visible area and be scrollable but for some reason this behavior is only working for Google Chrome or Safari but not in Firefox.

What am I misunderstanding? Or is there any specific thing to do in Firefox to make it work?

Expected layout:

Expected Layout Snapshot

.container {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  position: fixed;
  display: flex;
  flex-direction: column;
}

.header {
  background: green;
  height: 100px;
  flex: 0 0 100px;
}

.content {
  display: flex;
}

.left-column {
  background: red;
  flex: 1;
}

.right-column {
  background: blue;
  flex: 4;
  overflow: auto;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
    <div class="left-column">
      left column
    </div>
    <div class="right-column">
      right column 1<br />right column 2<br />right column 3<br />right column 4<br />right column 5<br />right column 6<br />right column 7<br />right column 8<br />right column 9<br />right column 10<br /> right column 11<br />right column 12<br />right
      column 13<br />right column 14<br />right column 15<br />right column 16<br />right column 17<br />right column 18<br />right column 19<br />right column 20<br /> right column 21<br />right column 22<br />right column 23<br />right column 24<br
      />right column 25<br />right column 26<br />right column 27<br />right column 28<br />right column 29<br />right column 30<br /> right column 31<br />right column 32<br />right column 33<br />right column 34<br />right column 35<br />right column
      36<br />right column 37<br />right column 38<br />right column 39<br />right column 40<br /> right column 41<br />right column 42<br />right column 43<br />right column 44<br />right column 45<br />right column 46<br />right column 47<br />right
      column 48<br />right column 49<br />right column 50<br /> right column 51<br />right column 52<br />right column 53<br />right column 54<br />right column 55<br />right column 56<br />right column 57<br />right column 58<br />right column 59<br
      />right column 60<br /> right column 61<br />right column 62<br />right column 63<br />right column 64<br />right column 65<br />right column 66<br />right column 67<br />right column 68<br />right column 69<br />right column 70<br /> right column
      71<br />right column 72<br />right column 73<br />right column 74<br />right column 75<br />right column 76<br />right column 77<br />right column 78<br />right column 79<br />right column 80<br /> right column 81<br />right column 82<br />right
      column 83<br />right column 84<br />right column 85<br />right column 86<br />right column 87<br />right column 88<br />right column 89<br />right column 90<br /> right column 91<br />right column 92<br />right column 93<br />right column 94<br
      />right column 95<br />right column 96<br />right column 97<br />right column 98<br />right column 99<br />right column 100<br />
    </div>
  </div>
</div>

thanks

Add `min-height: 0` to `.content`. https://jsfiddle.net/g2usL13w/1/ — Michael Benjamin, Jun 29 '17 at 16:01

score 0 · Answer 1 · answered Jun 29 '17 at 15:02

Have you tried using vendor prefixes? I ran your CSS through Autoprefixer:

            .container {
                bottom: 0;
                left: 0;
                right: 0;
                top: 0;
                position: fixed;                
                display: -webkit-box;                
                display: -ms-flexbox;                
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
            }
            .header {
                background: green;
                height: 100px;
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 100px;
                        flex: 0 0 100px;
            }
            .content {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
            }
            .left-column {
                background: red;
                -webkit-box-flex: 1;
                    -ms-flex: 1;
                        flex: 1;
            }
            .right-column {
                background: blue;
                -webkit-box-flex: 4;
                    -ms-flex: 4;
                        flex: 4;
                overflow: auto;
            }

.example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: linear-gradient(to bottom, white, black);
}

Not able to scroll overflow flex container in Firefox

1 Answers1