#flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; padding-bottom: 56.25%; /* intrinsic aspect ratio */ height: 0; }
<div id='flexBox'> <div id='padding'></div> <div id='text'>Some text</div> </div>
页面调整大小时的蓝色元素maintains it’s aspect ratio according to it’s width。
这适用于Chrome和IE，并且看起来像：
然而，在Firefox和Edge，我得到以下(它忽略蓝色框上的填充，这是维持宽高比的)
我对flexBox太新了，真的明白这应该还是不应该工作。 flexBox的整个重点是调整大小，但我不知道为什么它忽略内部填充，并将绝对大小放在蓝色元素。
我想最终我甚至不知道如果Firefox或Chrome是做正确的事情！任何Firefox flexBox专家可以帮助吗？
解决方法
规格有been updated到：
Percentage margins and paddings on flex items can be resolved against either:
- their own axis (left/right percentages resolve against width,top/bottom resolve against height),or,
- the inline axis (left/right/top/bottom percentages all resolve against width)
来源：CSS Flexible Box Layout Module Level 1
这意味着chrome IE FF和Edge(即使它们没有相同的行为)遵循规范推荐。
规格也说：
Authors should avoid using percentages in paddings or margins on flex
items entirely,as they will get different behavior in different
browsers. [07002]
解决方法：
您可以将flex容器的第一个子包装在其他元素中，并将填充底部放在第二个子元素上：
#flexBox { border: 1px solid red; width: 50%; margin: 0 auto; padding: 1em; display: flex; flex-direction: column; } #text { border: 1px solid green; padding: .5em; } #padding { margin: 1em 0; border: 1px solid blue; } #padding > div { padding-bottom: 56.25%; /* intrinsic aspect ratio */ }
<div id='flexBox'> <div id='padding'><div></div></div> <div id='text'>Some text</div> </div>
我在现代浏览器(IE，chrome，FF和Edge)测试这些，他们都有相同的行为。由于第二个孩子的配置是“一样的”，我想老旧的浏览器(aslo support flexbox layout module)将渲染相同的布局。
上一个答案：
根据specs，Firefox有正确的行为
说明：
与根据容器宽度计算其margin margin / padding的块项目不同，在flex项目上：
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.
这意味着，根据容器的高度计算padding-bottom / top和margin-bottom / top，而不是像非flexBox布局中那样计算宽度。
由于您没有在父弹性项目上指定任何高度，子项的底部填充应为0px。
这里是一个固定高度的父节点的fiddle，显示填充底部是根据显示器的高度计算：flex;容器。
