Html Firefox忽略所有子元素的边距和宽度，而父元素具有display flex

Firefox忽略父元素中所有子元素的边距和宽度，该父元素的显示设置为flex，flex方向设置为column。这在谷歌浏览器中是不会发生的。除了完全删除flex之外，还有什么方法可以解决这个问题吗

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

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

body{
显示器：flex；
弯曲方向：立柱；
}
#div{
边框：1px纯绿色；
利润率最高：10%；
身高：100%；
}
div

拨弄

www.iscattered.com/testAll.php

---

如果你在

html

和

body

选择器中都添加

height:100%

，一切都会好起来。

在firefox中，用像素代替div，而不用百分比。你能分享一把小提琴吗？可能有什么遗漏了。@ardabeyazoglu你知道我说过这只发生在Firefox中，对吗？那你为什么想让我分享一把小提琴？看看Firefox？看看你的整个css和html，因为这里我们有高度：100%的。。。nothing@frosty我正在使用最新版本的Firefox，43。如果您希望div是视口高度的100%，这意味着您不了解高度百分比是如何工作的。你失踪了，我不能。页面是动态的，高度取决于里面的内容。我能做的最多的就是将最小高度设置为100%，这并不能解决这里的问题。我不明白你为什么不能。根据内容，它仍然可以是动态的。你试着看了吗？是的，当然。如果我将正文的高度设置为100%，并且内容的高度更高，则会溢出。然后可以使用

overflow

属性对其进行更改。然而，如果你总是想扩大其内容的大小，这也不会有帮助。当然，这会妨碍响应性设计。但如果不是你的情况，那就做你最容易做的事情。@ardabeyazoglu你能解释一下你所说的响应式设计是什么意思吗？我这里实际上不是指“响应式设计”，而是指在不同大小的屏幕上可以改变的动态边距/高度。