Flexbox wrap 在 Firefox 中无法正常工作

Question

在 chrome 和 firefox 上比较下面的示例。

对我来说，它可以在 chrome 上正确包装，但是 firefox 没有进行包装，而是拉伸了 flexbox 并溢出了父级。那么谁在这里，chrome 还是 firefox？以及如何在两者上实现与 chrome 相同的效果？

html,
body,
#app {
  margin: 0;
  padding: 0;
}

#app {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

#top {
  flex: 0 0 40px;
  background-color: #ff0000;
}

#content {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  height: 200px;
}

<div id="app">
  <div id="top">

  </div>
  <div id="content">
    <div class="item">
      1
    </div>
    <div class="item">
      2
    </div>
    <div class="item">
      3
    </div>
    <div class="item">
      4
    </div>
    <div class="item">
      5
    </div>
    <div class="item">
      6
    </div>
  </div>
</div>

Answer 1

尝试像这样在父级上设置最小高度和最小宽度

 #content {
 min-height: 0;
 min-width: 0; }