Firefox ignores margins, and width of all child element, with parent element that has display flex

Question

Firefox ignores all the margins and width of all child elements inside a parent element which has display set to flex, and flex-direction set to column. This does NOT happen in google chrome. Is there any way to fix this, other than removing flex altogether?

body {  
display: flex;               
flex-direction: column;  
}
#div {
border: 1px solid green;
margin-top: 10%;
height: 100%;
}

<div id = 'div'> div </div>

fiddle

www.iscattered.com/testAll.php

@ardabeyazoglu You realize that I mentioned that this only happens in Firefox right? So why would you want me to share a fiddle? — frosty, Jan 25 '16 at 22:10
and to have a look at your entire css & html, because here we have height:100% of ... nothing — G-Cyrillus, Jan 25 '16 at 22:14
@frosty We cannot reproduce the issue in Firefox with the code you've shared. Unless you include enough code to reproduce the issue, this will be closed for the "no repro" close reason. — TylerH, Jan 25 '16 at 22:14
@GCyrillus 100% height of nothing...works perfectly fine in google chrome. — frosty, Jan 25 '16 at 22:18
@TylerH You're saying that my code works perfectly fine in firefox through your testing? — frosty, Jan 25 '16 at 22:19
@frosty yes: https://jsfiddle.net/873sdosj/ This code works exactly as it should according to the spec. By the way, a fiddle means http://jsfiddle.net — TylerH, Jan 25 '16 at 22:20
@TylerH What version of firefox are you using? You're seeing a height of 100% and a margin of 10%, in firefox? Because I'm seeing a height of the word 'div' and a margin of 0. — frosty, Jan 25 '16 at 22:22
@frosty I'm using the latest version of Firefox, 43. If you're expecting the div to be 100% the height of the viewport, that means you don't understand how height percentages work. AKA you're missing [some necessary CSS](https://jsfiddle.net/873sdosj/1/) — TylerH, Jan 25 '16 at 22:23
@TylerH I've provided a screenshot above of what it looks like to me. Also, if that is so, how come 100% height works on google chrome, just fine? If you want me to prove it, just click the link above of the image, and you'll see that i'm telling the truth. — frosty, Jan 25 '16 at 22:24
@frosty your div's height is the same in Chrome as it is in Firefox. — TylerH, Jan 25 '16 at 22:27
@TylerH Also, I'm afraid I can't use your answer of adding height: 100% to both html, and body, as all my pages are dynamic, and height are all different according to the content. — frosty, Jan 25 '16 at 22:29
@TylerH That's the same version I'm using. You're telling me that you went to this link https://www.iscattered.com/testAll.php in firefox and you're seeing the height of the div is 100%, and the margin is 10%? Can you provide a screenshot of what you're seeing? — frosty, Jan 25 '16 at 22:33
@frosty No, I didn't go to the website, because questions here should include a minimal and complete code reproduction in the questions themselves, rather than just linking to an external site. We can't be expected to be intimately familiar with your server settings or environment. Hence the request for a reproduction on **http://www.jsfiddle.net** — TylerH, Jan 25 '16 at 22:48
The code provided in the question produces the exact same result in Chrome, Firefox, Opera (Presto), and IE11. — cimmanon, Jan 25 '16 at 23:02

score 0 · Answer 1 · answered Jan 25 '16 at 22:27

0

If you add height:100% to both html and body selectors, everything will be alright.

answered Jan 25 '16 at 22:27

abeyaz

3,034
1
16
20

Can't. Pages are dynamic, height is according to the contents inside. The most I can do is set min-height to 100%, and that wouldn't solve the problem here. – frosty Jan 25 '16 at 22:29
I dont understand why you cant. It can still be dynamic according to content. Did you try and see ? – abeyaz Jan 25 '16 at 22:40
Yes, of course. If I set the height of the body to 100%, and the height of contents are higher, it would overflow. – frosty Jan 25 '16 at 22:48
Then you could use `overflow` attribute to change it. However, if you always want to grow the size to its content, it wouldnt help either. – abeyaz Jan 25 '16 at 22:54

score 0 · Answer 2 · answered Jan 25 '16 at 22:39

0

Instead of using percentages on the div, using pixels instead worked fine in firefox.

answered Jan 25 '16 at 22:39

frosty

2,559
8
37
73

Of course, but it prevents responsive design. But if it is not your case, just do what is easiest for you. – abeyaz Jan 25 '16 at 22:41
@ardabeyazoglu Can you explain what you mean by responsive design? – frosty Jan 25 '16 at 22:46
I didnt actually mean 'responsive design' here, but the dynamic margin/height which can change in different size of screens. – abeyaz Jan 25 '16 at 22:50

Firefox ignores margins, and width of all child element, with parent element that has display flex

2 Answers2