CODEWITHSUNDEEP
htmlcssfirefox
user3364528
user3364528

Reputation: 27

Flexbox content spills over in Firefox

I'm not sure what I'm doing wrong here, but for some reason, Firefox doesn't adjust the height of my Flexbox blurbs according to its content like how Safari and Chrome do.

Blurb is basically the different boxes in my layout. Before you say anything, I've also tried switching it back to a div layer, but it still doesn't work.

The basic code of Blurb is as follows:

blurb {
display: block;
height: auto;
margin: 5px;        
padding: 10px;  
background: #fffeee;
-webkit-flex: 3 0 0;
    flex: 3 0 0;
}

Here is my code: http://jsfiddle.net/HenQ8/1/

The general layout of the page is like this:

General Layout

There's nothing wrong with the code when it comes to Safari and Chrome, which renders it like this:

Safari and Chrome

but when it comes to Firefox the height bases itself on the column on the right like this:

enter image description here

Any idea what I'm doing wrong, or what I should add to the blurb so that it contains its content to itself instead of spilling out? Thanks in advance!

Upvotes: 1

Views: 951

Answers (1)

Carl Blakemore
Carl Blakemore

Reputation: 81

It looks like the main problem comes down to a couple lines from your 'blurb' block of CSS. Specifically, your flex/-webkit-flex lines:

flex: 3 0 0;
-webkit-flex: 3 0 0;

The last parameter of flex is "flex-basis," which is apparently being handled a little differently between Firefox and Chrome/Safari. If you inspect one of the 'blurb' elements and look at the computed styles in Chrome and Firefox, you'll see that the browsers are interpreting the value as '0px.' The problem is that while Chrome is expecting '0px,' Firefox is not. Firefox is expecting '0%' (which is not exactly the same thing as 0px); annoyingly, if you were to use "flex: 3 0 0%," while it would fix it for Firefox, it would also break Chrome and Safari's display. It looks like while Chrome and Safari are trying to do the right thing with 0px, Firefox is sticking closer to the standard. When it sees '0px,' it attempts to make the blurb boxes as small as possible, causing the text to overlap.

If you search through the flexbox spec (http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/) for "flex-basis" you can find some further details on it as well as some discussion of 0px vs 0%.

Instead of providing flex-basis a number, however, you can also use "auto" which will size the element "according to its size property (which can itself be the keyword auto, which sizes the element based on its contents)" (http://css-tricks.com/almanac/properties/f/flex-basis/). In my testing this has resolved the display in Firefox, Chrome and Safari.

Example CSS block with changes:

blurb {
    display: block;
    outline: 2px solid red;
    margin: 5px;
    padding: 10px;  
    background: #fffeee;
    -webkit-flex: 3 0 auto;
    flex: 3 0 auto;
}

Fiddle example: http://jsfiddle.net/blake770/85McA/2/

Links if you want to do more reading:

Upvotes: 2

Related Questions