フレックスボックスとファイヤーフォックスが完全に違って見える

Question

この質問はむしろ「ノービッシュ」と見なされるかもしれませんが、なぜ私のフレックスボックスがFirefoxで全く違って見えるのかを知りたいと思います。何を忘れましたか？どんな助力も大歓迎です。 私はそれが私はそれがどのように見えるのです

逃した本当に簡単な何か怖い：

クローム：

を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

ここにデモがあります。

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

Answer 2

は、おそらくその理由は、あなたがチェックFirefox versionです。

オン57.0.1私は同じ結果を見る。