Flex inside flex doesent work in Firefox 38

Question

I try to use flex in firefox, it doesent work, in Chrome, it works like a charm! Here is the result in Firefox: enter image description here

And here is how it looks (should look) in Chrome/Opera: enter image description here

What is the problem?

Here is the CSS, that doesent work on Firefox:

.jawcontain {display: flex;flex-direction: column;justify-content: space-between;border: white solid 7px;border-radius: 23px;}

.jaw {background-color: rgb(24, 24, 24);border-radius: 5%;display: flex;flex-direction: row;padding-top: 2%;padding-bottom: 5%;border: 10px solid rgb(0, 151, 255);justify-content: space-around;}

.hala {border: white solid 2px;padding-left: 10%;border-radius: 5%;margin-right: 2% display: flex;flex-basis: 40%;flex-direction: column;background: black;justify-content: space-around;}

Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved. Posting a [Short, Self Contained, Correct Example (SSCCE)](http://www.sscce.org/) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! — j08691, May 27 '15 at 21:14
@Abdelouahab That CSS is not enough. We need the shortest code necessary to reproduce the problem. — Oriol, May 27 '15 at 22:25
@Oriol I am sorry, because the code is generated from serveur side, here is the result http://meteo-algeria.rhcloud.com/ — Abdelouahab, May 27 '15 at 22:43
Possible duplicate of [Padding-bottom/top not working in flexbox layout (Firefox)](http://stackoverflow.com/q/23717953/1529630) — Oriol, May 29 '15 at 22:59

score 1 · Accepted Answer · answered May 27 '15 at 23:21

The problem is that .jaw are flex items, and you use

.jaw {
  padding-top: 2%;
  padding-bottom: 5%;
}

In CSS 2.1, percentages in padding were specified as

The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'.

However, in Flexible Box Layout Module,

Percentage margins and paddings on flex items are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block.

Therefore, Firefox attempts to resolve those percentages with respect to the height of the flex container. But that height is auto, that is, it depends on the height of the content, including the vertical paddings. It's a circular definition, so the paddings compute to 0.

But Chrome does not agree, and resolves the percentages with respect to the width of the flex container. The spec warns about that:

Note: This behavior is currently disputed, and might change in a future version of this specification to match the behavior of blocks.

Since you don't seem to be using flex, you can remove

.jawcontain {
  display: flex;
}

Then, .jaw will no longer be flex items, and the paddings will be resolved with respect to the width of the containing block.

wow! dident knew that firefox hated so much the percentage! thank you again! I will remake the whole website using `px` instead of `%` Thank you again! — Abdelouahab, May 27 '15 at 23:32

Flex inside flex doesent work in Firefox 38

1 Answers1