Flexbox包装在Firefox中无法正常工作

Question

比较下面关于chrome和firefox的例子。

它适合我的chrome包装，但firefox而不是包装，拉伸flexbox并溢出父级。那么谁就在这里，chrome或firefox？我怎样才能在两者上实现与chrome相同的效果？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试设置父级的最小高度和最小宽度，如此

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