How to Get Ff 33.X Flexbox Behavior in Ff 34.X

How can I get FF 33.x Flexbox behavior in FF 34.x?

The relevant difference there is the "implied minimum size of flex items", a new feature in the flexbox spec. (or rather, a feature that was removed and re-introduced)

The simplest (bluntest) way to restore the old behavior is to add this style rule: * { min-height:0 } (or min-width, if you were concerned about overflow in a horizontal flexbox; but it looks like your testcase only has trouble with overflow from a vertical flex container).

Updated fiddle, with that change:
http://jsfiddle.net/yoL2otcr/1/

Really, you should only need to set min-height:0 on specific elements -- in particular, you need it on each element that:

is a child of a 'column'-oriented flex container
has a tall descendant, which you want to allow to overflow (which will perhaps be handled gracefully by an intermediate element with "overflow:scroll", as is the case here)

(In your case, there's actually a nested pile of these elements, since you have a single tall element inside of many nested flex containers. So, you likely need min-height:0 all the way up, unfortunately.)

(If you're curious, this bug has more information & more examples of content that was broken on the web due to this spec-change: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 )

Firefox, Flexbox & overflow

Fix:

input { min-width: 1px; }

For vertical direction - min-height;

CSS Flexbox Issue in Firefox v36 and Greater

Add this:

.container-wrapper {
    min-height: 0;
}

html {  box-sizing: border-box;}*, *:before, *:after {  box-sizing: inherit;}html, body {  margin: 0;  height: 100%;}.fixed {  position: fixed;  top: 60px;  right: 0;  bottom: 0;  width: 100%;  max-width: 400px;}.outer {  border: 1px solid black;  height: 100%;  display: -ms-flexbox;  display: flex;  -ms-flex-direction: column;  flex-direction: column;}.outer > * {  -ms-flex: 0 0 auto;  flex: 0 0 auto;}.container-wrapper {  -ms-flex: 1 1 100%;  flex: 1 1 100%;  display: -ms-flexbox;  display: flex;  -ms-flex-direction: column;  flex-direction: column;  min-height: 0;}.action-bar {  -ms-flex: 0 0 auto;  flex: 0 0 auto;  border-top: 1px solid silver;  border-bottom: 1px solid silver;  padding: 20px;  text-align: right;}.container {  -ms-flex: 1 1 100%;  flex: 1 1 100%;  overflow-y: auto;}.list {  display: -ms-flexbox;  display: flex;  padding-top: 10px;  padding-bottom: 10px;  border: 1px solid aqua;}.display-name {  -ms-flex: 1 1 100%;  flex: 1 1 100%;  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  padding-right: 8px;}.display-date {  -ms-flex: 0 0 auto;  flex: 0 0 auto;}

<div class="fixed">  <div class="outer">    <div>      <p>Title</p>    </div>    <!-- The inner contents of container-wrapper is dynamic so I cannotsimply move the action-bar item outside -->    <div class="container-wrapper">      <div class="action-bar">        <button>I don't do anything but occupy space</button>      </div>      <!-- Firefox allows this element to grow beyond the remaining space of the container-wrapperthus expanding the height of the container-wrapper and not allowing scroll -->      <div class="container">        <div class="list">          <div class="display-name">            Display Name          </div>          <div class="display-date">            Mar 31, 2015          </div>        </div>        <div class="list">          <div class="display-name">            Really long name that should be truncated. I don't know          </div>          <div class="display-date">            Mar 31, 2015          </div>        </div>        <div class="list">          <div class="display-name">            Display Name          </div>          <div class="display-date">            Mar 31, 2015          </div>        </div>        <div class="list">          <div class="display-name">            Display Name          </div>          <div class="display-date">            Mar 31, 2015          </div>        </div>        <div class="list">          <div class="display-name">            Display Name          </div>          <div class="display-date">            Mar 31, 2015          </div>        </div>      </div>      </div>  </div></div>

Firefox 34+ ignoring max-width for flexbox

Edit—the original answer was not fully correct

The important aspects here are

The "flex item" div.imageContainer needs a positive flex-shrink value
The (display:inline) img child of the flex item needs its own constraint to ensure it doesn't overflow the flex item
In accordance with the W3C flexbox spec^*, the flex item needs some kind of definite size constraint, which we can satisfy by delcaring min-width:1px or max-width:100% on .imageContainer; otherwise, in accordance with the spec, the .imageContainer must take its content's size, i.e. the full 1000px intrinsic size of the PNG image

OP's question already satisfied point 2, but not points 1 and 3. Here is the CSS which I used:

.mediaContainer
{
    overflow: visible;
    width:100%;
}

.mediaCenterContainer
{
    display: flex;
}

.imageContainer
{
    flex-shrink:1;
    min-width:1px;
}
.imageContainer img {
    max-width:100%;
}

… and here's a fiddle demonstrating it.

Many thanks to @dma_k for pointing out the error in my original answer.

^{*I usually hate linking to W3C specs, but this section is actually quite readable; I'd encourage people to read it.}

Original answer

Firefox 36 (currently dev preview) gives the behaviour you expect if you constrain the div rather than the img. You can do this using flex-shrink:

.imageContainer {
  flex-shrink:1;
}

… or the short-hand flex property:

.imageContainer {
  flex: 0 1 auto;
}

… or using the max-width declaration you had placed on the img, but also on the div:

.imageContainer, .imageContainer img {
  max-width:100%;
}

So Firefox allows flex elements to overflow their containers. I don't know the flexbox spec that well, but it seems natural that this would be the case; that's why the flex-shrink property exists.

My flexbox container has extra padding in Firefox

This is because the way Firefox handles min/max width/height in flex elements changed in version 34 in response to an update in the Flexbox spec:

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.

To fix it, you'll need to add min-height: 0; to your #item-list > div selector to override the default value of auto that Firefox uses:

JSFiddle Example

html, body {    height: 100%;}#wrapper {    height: 50%;    background: #EAF9FF;}#item-list {    display: flex;    flex-direction: column;    height: 100%;    background: #B8E8F8;    width: 476px;    margin: 0 auto;    padding: 10px;}#item-list > .nav-tabs {    border: none;}#item-list > div {    display: flex;    flex: 1;    flex-direction: column;    height: 100%;    max-height: 100%;    background: #9FD9F0;    padding: 10px;    min-height: 0; /* This property is new */}.list-group {    overflow-y: scroll;    background: #82C8E0;    padding: 10px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/><div id="wrapper">    <div id="item-list">        <ul class="nav nav-tabs">            <li><a href="#">tab1</a></li>            <li><a href="#">tab2</a></li>            <li><a href="#">tab3</a></li>            <li class="pull-right"><a href="#">tab4</a></li>        </ul>        <div ng-show="activeTab != 'create'">            <ul class="list-group">                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>                <li>Some item...</li>            </ul>        </div>    </div></div>

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

Flexbox: Two column layout with large child element - Works in Chrome but Not Firefox/IE

Try removing flex-flow: row wrap; from .unit-body.

Also, it seems that Firefox is handling this incorrectly, I found this answer: https://stackoverflow.com/a/26916542/152016

Add min-width:0; to .unit-aside and it should work.

Understanding the behavior of overflow: hidden in a flexbox container

When you apply overflow: hidden to .main, this clips .child1 but not .child2 (the div with text).

So .child2 overflows .main because there is no overflow: hidden on .child1 (demo).

To understand this better, try overflow: scroll on .main instead of hidden.

When you use overflow: hidden on .child1, this clips .child2.

Now the width of .child2 is limited, and ellipsis works as intended (demo).

Again, this can be illustrated more clearly with overflow: scroll on .main.

Also keep in mind, the overflow property applies only to content of a block container.

From the spec:

11.1.1 Overflow: the overflow
property

This property specifies whether content of a block container element
is clipped when it overflows the element's box. It affects the
clipping of all of the element's content except any descendant
elements (and their respective content and descendants) whose
containing block is the viewport or an ancestor of the element.