html - Flexbox 在 Firefox 中看起来完全不同

Question

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

这就是它的样子:

Chrome :

火狐:
我的代码:

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

这是一个演示。

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

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