Firefox 忽略所有子元素的边距和宽度，父元素具有显示 flex [重复]答案

【问题标题】：Firefox ignores margins, and width of all child element, with parent element that has display flex [duplicate]Firefox 忽略所有子元素的边距和宽度，父元素具有显示 flex [重复]
【发布时间】：2016-05-02 09:30:42
【问题描述】：

Firefox 会忽略显示设置为 flex 且 flex-direction 设置为 column 的父元素内所有子元素的所有边距和宽度。这确实 NOT 发生在 google chrome 中。除了完全删除 flex 之外，有什么方法可以解决这个问题？

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

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

小提琴

www.iscattered.com/testAll.php

【问题讨论】：

你能分享一个小提琴吗？大概是少了什么。
@ardabeyazoglu 你意识到我提到这只会发生在 Firefox 中，对吧？那你为什么要我分享一个小提琴？
想看看火狐？
看看你的整个 css 和 html，因为这里我们有 height:100% of ... nothing
@frosty 我正在使用最新版本的 Firefox，43。如果您期望 div 是视口高度的 100%，这意味着您不了解高度百分比是如何工作的.又名你错过了some necessary CSS

标签： html css firefox flexbox

【解决方案1】：

如果您将height:100% 添加到html 和body 选择器中，一切都会好起来的。

【讨论】：

不能。页面是动态的，高度根据里面的内容而定。我能做的最多就是将 min-height 设置为 100%，这并不能解决这里的问题。
我不明白你为什么不能。根据内容，它仍然可以是动态的。你试过了吗？
是的，当然。如果我将 body 的高度设置为 100%，并且内容的高度更高，它会溢出。
然后你可以使用overflow属性来改变它。但是，如果您总是想扩大其内容的大小，那也无济于事。

【解决方案2】：

不是在 div 上使用百分比，而是使用像素在 firefox 中效果很好。

【讨论】：

当然可以，但它会阻止响应式设计。但如果不是你的情况，那就做对你来说最简单的事情。
@ardabeyazoglu 你能解释一下你所说的响应式设计是什么意思吗？
这里我的意思不是“响应式设计”，而是动态边距/高度可以在不同尺寸的屏幕上发生变化。