フレキシボックスはSafariでの作業が、Chromeで動作しないFirefoxの

Question

HTMLコード：

<div class="box-wrapper"> 
    <div class="box odd"> 
     <div class="box-title">TITLE 1</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
    arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
    semper. Sed a risus purus.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 2</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 3</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 4</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 5</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 6</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
    arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
    semper. Sed a risus purus.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 1</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
    arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
    semper. Sed a risus purus.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 2</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 3</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 4</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 5</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis.</p> 
     </div> 
    </div><div class="box odd"> 
     <div class="box-title">TITLE 6</div> 
     <div class="box-content"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula. 
    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est. 
    Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec 
    arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel 
    semper. Sed a risus purus.</p> 
     </div> 
    </div> 
</div> 

CSS：ここ

.box-wrapper { 
    padding: 0; 
    margin: 0; 
    margin-left: -10px; 
    list-style: none; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    justify-content: space-around; 
} 
.box { 
    margin-top: 10px; 
    padding-left: 10px; 
} 
.box.odd {max-width: 16.66%;} 
.box.even {max-width: 25%;} 
.box.side-block {margin: 10px 0; border: 1px solid #ccc;} 
.box.side-block .box-title {background-color: #70E070;} 
.box.side-block .box-content {padding: 0 8px 8px;} 
.box.side-block .box-content p {margin-bottom: 0;} 
.box .box-title {background-color: #FF4A4A; color: #fff; text-align: center; margin-bottom: 10px; 
    padding: 5px;} 
.box.odd .box-title {background-color: #4F8DFF;} 
.box.even .box-title {background-color: #FF4A4A;} 
.box .box-content {text-align: left;} 

はcodepenのコードの例です：Chromeで http://codepen.io/anon/pen/WxzmZr

チェック/ FirefoxがSafariをチェックインします。 Chrome/Firefoxでは、すべての6つのボックスが整列しているように見えますが、1行に1つのボックスが表示されます。

どうすれば修正できますか？

ありがとうございます。

Answer 1

問題は.boxの最大幅にあります。私はちょうど幅に変更し、すべて正常に働いた。