CSS Flexbox Width 100% Firefox

CSS flexbox width 100% Firefox

firefox has problems with the width of the object #item-list. I can not think of anything else then this is a bug, at least chrome is less picky on the width. So, what you'll have to do is give it a fixed width as said by redbmk. So here is the solution:

set the #item-list position to absolute and give it a width of 100% (in the example minus the border of the divs).

#pager {
  display: flex;
  position: relative;
  background-color: #fff;
  border: 3px solid pink;
  height:246px;
}

#item-list {
  border: 1px solid black;
  position:absolute;
  width: calc(100% - 9px);
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

I also changed some small(not really important things) in your code.

see it here:

Jsfiddle

Cheers!

Different implementation of Flexbox in Firefox and Chrome

The following code works as expected in Firefox

I disagree with this because for me Chrome is behaving as expected for 2 reasons:

You set the width of the image to be 100% which means 100% of their containing block (container) that is defined by 600px. So each image will be 600px
The image cannot shrink past its content size due to the default min-width configuration (note that using unset is equivalent to initial in this case so it's somehow useless). So the image will be kept at 600px

If you add min-width:0 the image will shrink only in width:

.r {  width: 100%;  /*height: auto; useless */  min-width: 0;  max-width: 100%;}
.container {  display: flex;  width: 600px;}

<div class="container">  <img src="https://via.placeholder.com/1000x500" class="r" >  <img src="https://via.placeholder.com/1000x500" class="r" >  <img src="https://via.placeholder.com/1000x500" class="r" >  <img src="https://via.placeholder.com/1000x500" class="r" ></div>

width does not work inside flexbox using firefox

There are lots of bugs listed in Bugzilla regarding the 2009 implementation of Flexbox. This is one of them.

https://bugzilla.mozilla.org/show_bug.cgi?id=529761

FF's css width, min-width, max-width, height, min-height, and
max-height properties do not work correctly using percentages % values
on two or more -moz-box flex elements. [...] Presently, there is no work around to correct it.

Firefox ignores width property of element when using flex

try this code

<style>

        .layout-row,
        .layout-col {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }

        .layout-row {
            flex-flow: row wrap;
            width: 100vw;
        }

        .layout-col {
            flex-flow: column wrap;
        }

        .c-l-8 {
            width: 100%;
        }

        .r-6 {
            width: 100%;
            height: 50%;
        }

        .h-800 {
            height: 800px;
        }

        .one,
        .two {
            width: 100%;
            height: 100%;
        }

        .one {
            background: red;
        }

        .two {
            background: blue;
        }

  </style>

Hope this helps..

Take care and happy coding

Why Flex-box with heigh:100% works in all browsers except Firefox?

I do not understand the idea of display:table here, but if you want to use it , best is to do it from html in order to create a table of a single cell layed over the window:

* {  box-sizing: border-box;}
html,body{  width: 100%;  height: 100%;  display: table;}
body {  display: table-row;}

<app-root style="display:table-cell; ">  <div style="display: flex; flex-direction: column; height:100%;">
    <div style="display: flex; flex-flow: row wrap; flex: 1 ;">      <div style="flex: 1 1 50%; background:yellow;">        <div>DIV 1</div>      </div>
      <div style="display: flex; flex-direction: column; flex: 1 1 50%; background:orange; ">        <div>DIV 2</div>      </div>    </div>
    <div style="display: flex; flex-direction: row; background:gray; padding:1rem;">      <div>DIV Footer</div>    </div>
  </div></app-root>

Flex items overflowing in Firefox

You will need to set:

.form .expiry input {
  min-width: 0;
}

jsFiddle

The reason is flex items have min-width:auto set by default, and for a replaced element such as <input>, it has intrinsic dimensions. The flex item won't shrink when the total width of the input boxes exceeded.

You can also give the size attribute a smaller value (default is 20 for text input) to make it smaller:

<input type="text" size="3">

References

Automatic Minimum Size of Flex Items
Replaced elements
HTML <input> attribute size

CSS flex box wrong size issue on Mozilla Firefox

Disclaimer: I'm not entirely sure if my explanation is 100% correct, but the solution below seems to fix the problem.

The problem seems to be that no absolute height has been set for the body, containers or images.
Although the height of the images seems to be correct in Firefox, the original width of the images seems to be used when calculating the required width (you can see this if you comment out .rounded-icon{ height: 80%;} and the widths of the containers don't change), which eventually leads to the wrong width of the containers.

So to fix the problem you can simply assign an absolute height to either the body, the containers or the images (vh works, too):

.rounded-icon {
  height: 30px; /* instead of 80% */
}

/* OR */
header {
  height: 8vh; /* instead of 8% */
}

/* OR */
body {
  height: 100vh;
}

Firefox flexbox image width

You need to add min-width:0 on .middleColumn, if you want to allow it to shrink below its min-content width (the intrinsic width of its <img>-child).

Otherwise, it gets the new default min-width:auto, which on a flex item will basically make it refuse to shrink below its shrinkwrapped size.

(Chrome hasn't implemented min-width:auto yet. I'm told IE has, in their next-gen rendering engine, so I'd expect that version should behave like Firefox here -- as will Chrome, once they implement this feature.)

Snippet with that fixed:

<!DOCTYPE html><html>  <head>    <style type="text/css">.container {  width:300px;}.flexbox {  display:flex;}
.flexbox .column {  flex:1;  background-color: red;}
.flexbox .middleColumn {  flex:3;  min-width:0;}
.flexbox .middleColumn img {  width:auto;  height:auto;  max-width:100%;  max-height:100%;  align-self: center;  display: block;}    </style>  </head>  <body>    <div class="container">      <div class="flexbox">        <div class="column">This is the left column!</div>        <div class="middleColumn">          <img src="http://placehold.it/400/333333">        </div>        <div class="column">This is the right column!</div>      </div>    </div>  </body></html>

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.

CSS Flexbox Width 100% Firefox