Question

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

Chrome Full：

Chrome Shrinked：

Firefox Shrinked：

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

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

Answer 1

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

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

Answer 2

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

codepen

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: