为什么Firefox会忽略flex-item的底边距? [英] Why does Firefox ignores bottom margin of flex-item?
问题描述
仅当有足够的空间时，它才会尊重margin-bottom.否则，Firefox的行为就好像根本没有margin-bottom.
It respects margin-bottom only when there is enough room for it. Otherwise Firefox behaves as if there is no margin-bottom at all.
Chrome浏览器完整版:
Chrome Full:
Chrome缩小了:
Chrome Shrinked:
Firefox缩小了:
Firefox Shrinked:
flexbox的行为是否正确?如何解决?
Is it correct behaviour of flexbox? How to fix it?
.container {
position: fixed;
display: flex;
flex-direction: column;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.grow {
flex-grow: 1;
flex-shrink: 0;
background: #8f8;
}
.content {
width: 500px;
margin: 20px auto;
border: 1px solid currentColor;
background: #f88;
}
<body>
<div class="container">
<div class="grow"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, facilis omnis inventore, illum eos quis fuga quos id, labore consectetur quas. Unde sed nemo nobis recusandae saepe ex nulla accusantium?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias asperiores a enim magnam voluptatem. Ab sint possimus quis odit vero explicabo unde quod rem, quasi voluptatibus cupiditate voluptatem veritatis repudiandae.</p>
</div>
<div class="grow"></div>
</div>
</body>
推荐答案
我认为这是发生了什么:当窗口太小时，<div class="grow"></div>元素会一直缩小到0像素的高度.现在，Firefox甚至不用理会它们.因此，您在<div class="content"></div>元素下方没有任何元素，因此该元素的底边距不会被应用.页面只有一个底边距的元素具有相同的效果.
I think this is what's happening: When the window is too small, the <div class="grow"></div> elements shrink all the way down to a height of 0 pixels. Now Firefox doesn't even bother rendering them. So you don't have any element underneath the <div class="content"></div> element, and therefore the bottom margin of that element doesn't get applied. A page with just one element with bottom margin has the same effect.
我会以不同的方式设置您的html/css，因此您不会遇到此问题.例如，您可以在content div周围使用一个容器，并在其上应用填充.
I would set up your html/css differently so you don't run into this problem. You can use a container around the content div and apply padding on that for example.
这篇关于为什么Firefox会忽略flex-item的底边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
