Flexbox在firefox中看起来完全不同

Question

我认为这个问题可能被认为是“noobish”，但我想知道为什么我的flexbox在firefox中看起来完全不同。我忘记了什么任何帮助非常感谢。 我担心这是我错过的非常简单的事情

它的外观如下：

铬：

火狐：
我的代码：

CSS：

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 -webkit-flex-flow: row;
  justify-content: space-around;
  line-height: 30px;
}
.flex-item {
    border: 1px solid black;
    margin: 30px;
    /* max-width: 350px; */
    max-height: 350px;
    min-height: 72px;
    text-align: center;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

HTML：

<div class="flex-container">
    <div class="flex-item">
        <div id="catBox">
            Kategorie 1
        </div>
    </div>

    <div class="flex-item">
        <div id="catBox">
            Kategorie 2
        </div>
    </div>

    <div class="flex-item">
        <div id="catBox">
            Kategorie 2
        </div>
    <div class="flex-item">
        <div id="catBox">
            Kategorie 3
        </div>
</div>

Answer 1

这是一个示范。

＆＃13;

＆＃13;

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  justify-content: space-around;
  line-height: 30px;
}

.flex-item {
  border: 1px solid black;
  margin: 20px;
  height:35vh;
  text-align: center;
  flex: 1;
}

＆＃13;

<div class="flex-container">
  <div class="flex-item">
    <div id="catBox">
      Kategorie 1
    </div>
  </div>

  <div class="flex-item">
    <div id="catBox">
      Kategorie 2
    </div>
  </div>

  <div class="flex-item">
    <div id="catBox">
      Kategorie 3
    </div>
  </div>
  <div class="flex-item">
    <div id="catBox">
      Kategorie 4
    </div>
  </div>
</div>

<div class="flex-container">
  <div class="flex-item">
    <div id="catBox">
      Kategorie 1
    </div>
  </div>

  <div class="flex-item">
    <div id="catBox">
      Kategorie 2
    </div>
  </div>
  <div class="flex-item">
    <div id="catBox">
      Kategorie 3
    </div>
  </div>
  <div class="flex-item">
    <div id="catBox">
      Kategorie 4
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

原因可能是Firefox version你查了一下。

在57.0.1上，我看到相同的结果。