html - Flexbox 换行在 Firefox 中无法正常工作

Question

比较下面在 Chrome 和 Firefox 上的示例。

它在 chrome 上对我来说正确包装，但 Firefox 不是包装，而是拉伸(stretch) 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; }