Rendering Problems Using Flexbox in Firefox and Chrome 48

Rendering problems using flexbox in Firefox and Chrome 48

The flexbox specification was updated making the default minimum size of flex items equal to the size of the content: min-width: auto / min-height: auto.

You can override this setting with min-width: 0 / min-height: 0:

.content {
    background: yellow;
    flex: 1;
    display: flex;
    flex-direction: column;

    min-height: 0;           /* NEW */
    min-width: 0;            /* NEW */
}

http://jsfiddle.net/d4nkevee/1/

Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520

Here are some details from the spec:

4.5. Implied Minimum Size of Flex
Items

To provide a more reasonable default minimum size for flex items, this
specification introduces a new auto value as the initial value of
the min-width and min-height properties defined in CSS 2.1. (read more)

UPDATE

It appears that Chrome has updated their rendering behavior. Chrome 48 now emulates Firefox in terms of minimum flex sizing.

Based on reports in the following links, the solution above should work in Chrome 48, as well.

• Possible Chrome 48 flexbox bug causing layout issues. #6841
• Issue 580196: Nested 'flex-direction:column' elements don't shrink properly

Incorrect flexbox display in Chrome 48

Indeed, there is an annoying bug in Chrome 48 where flexbox is broken, mentioned here:

https://github.com/angular/material/issues/6841

My suggested fix for your CSS is:

.image {
    width: 50%;
    display: block;
    min-height: 0;
    min-width: 0;
}

Vertical scroll rendering issue in Flexbox in Firefox

This has to do with the flexbox specification's implied minimum sizing algorithm.

This is a Firefox bug.

Adding min-width: 0; min-height: 0 to #wrapper seems to do the trick:

#wrapper {
    display: flex;
    flex-grow: 2;
    flex-basis: 0%;
    min-height: 0; /* NEW */
    min-width: 0; /* NEW */
}

DEMO

Original Answer Below

Currently you have overflow-y: scroll applied to #left.

If you also apply overflow-y: scroll to #wrapper, the vertical scroll launches in Firefox.

As to why Firefox interprets the code differently than Chrome I can't say. The rendering engines have their differences. I recently addressed another flexbox interpretation issue between IE11 and Chrome:

More information:

• Bug 1043520 - (minsizeauto-fallout) Tracking bug for web content breaking due to new "min-width:auto" / "min-height:auto" behavior on flex items

• Bug 570036 - Flexible box does not allow overflow scrolling of children elements without extra markup

• DEMO: http://jsfiddle.net/seqgz8qv/ (scroll works in FF)

• Scroll not working with CSS3 flex box in Firefox

• Flexbox and vertical scroll in a full-height app using NEWER flexbox api

• Scrolling a flexbox with overflowing content
  

Using flexbox and overflow hidden & scroll not working in Firefox?

It works for me in firefox 45.0.1 if you remove the height:100% from #tabContent completely. What do you need it for? As the last block element #bottomBlock will always be on the very bottom.
Maybe it's a wierd css overriding/priority issue. I could imagine FF can't calculate the overall content height correctly because of the competetive #tabContent > * and #bottomBlock selectors.

Did you also try making tabContent as a class? Sometimes that solves strange css inherit or override problems (for me).

Horizontal scroll works on IE11 but not on Chrome and Firefox

Update your css like below. You need to set the width to 0 (see note below) on the fill elements.

And don't forget to prefix the "flex" properties for cross browser compatibility on older browser versions

Flex support: http://caniuse.com/#feat=flexbox

.flex-container{   display: -webkit-flex;   display: flex;}
.flex-item-auto{     -webkit-flex: 0 0 auto;  /* grow shrink basis */     flex: 0 0 auto;  /* grow shrink basis */}
.flex-item-fill{    -webkit-flex: 1 1 auto;    flex: 1 1 auto;    width: 0;}
.left{    align-self:  -webkit-flex-start; /* align top */    align-self:  flex-start; /* align top */}
.middle{    background-color: green;    /*white-space: nowrap;*/    overflow-x: scroll; }
.next, .prev{    background-color: white;}
.big{    width: 1000px;    height: 20px;}

<div class="flex-container">    <button class="left flex-item-auto">My Button</button>    <div class="flex-item-fill flex-container">        <div class="prev flex-item-auto">Prev</div>        <div class="middle flex-item-fill">           <div class="big"></div>        </div>                <div class="next flex-item-auto">Next</div>          </div></div>