为什么 Firefox 会忽略 flex-item 的下边距？答案

【问题标题】：Why does Firefox ignores bottom margin of flex-item?为什么 Firefox 会忽略 flex-item 的下边距？
【发布时间】：2017-11-07 10:02:30
【问题描述】：

它尊重margin-bottom 只有当有足够的空间时。否则 Firefox 的行为就好像根本没有 margin-bottom。

Chrome 完整版：

镀铬收缩：

Firefox 缩小：

flexbox 的行为是否正确？如何解决？

codepen

.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>

【问题讨论】：

考虑将flex-basis 添加到.grow。 codepen.io/anon/pen/LLVpZN?editors=1100
@Michael_B 使用flex-basis 你将强制拥有至少1px 高度的.grow 元素。当屏幕太小时，我不想要它们。

标签： html css firefox flexbox

【解决方案1】：

我认为这是正在发生的事情：当窗口太小时，<div class="grow"></div> 元素会一直缩小到 0 像素的高度。现在 Firefox 甚至不用费心渲染它们。因此，<div class="content"></div> 元素下方没有任何元素，因此不会应用该元素的下边距。一个只有一个元素的页面具有相同的效果。

我会以不同的方式设置您的 html/css，这样您就不会遇到这个问题。例如，您可以在 content div 周围使用容器并对其应用填充。

【讨论】：

行为是否正确（Chrome和IE没有这个问题）？

【解决方案2】：

我坚持使用flex-direction: row，只有一个具有margin: auto 的弹性项目。我把我的容器放在里面。这样它就可以在 Chrome、Firefox、IE 和 Safari 中正常运行：

codepen

.container {
  position: fixed;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  /* when using *column* Safari 9.0 and below will ignore bottom margins */
  flex-direction: row; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: #f88;
}
.content-wrapper {
  margin: auto;
}
.content {
  width: 500px;
  margin: 20px;
  border: 1px solid currentColor;
  background: #8f8;
}

<body>
  <div class="container">
    <div class="content-wrapper">
      <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>
  </div>
</body>

【讨论】：