爲什麼不能在chrome中工作？但在Firefox和其他瀏覽器中工作得很好？

Question

不知道我做錯了什麼，但它只是不會在Chrome中工作。我試過將高度改爲不同的值，但沒用。 問題是.many_boxes_container上的高度不能工作。它的工作是我的Firefox，但不是我的Chrome，我的老師可以看到這個問題。

<section id="mondrian"> 
    <div class="left"> 
    <div class="left_container"> 
     <div class="big_red"></div> 
     <div class="big_white"></div> 
    </div> 
    </div> 
    <div class="middle"> 
    <div class="middle_container"> 
     <div class="small_yellow"></div> 
     <div class="small_white"></div> 
     <div class="small_blue"></div> 
    </div> 
    </div> 
    <div class="right"> 
    <div class="right_container"> 
     <div class="many_boxes"> 
     <div class="many_boxes_container"> 

      <div class="white_blue"> 
      <div class="white_blue_container"> 
       <div class="white"></div> 
       <div class="blue"></div> 
      </div> 
      </div> 
      <div class="red_white"> 

      <div class="red_white_container"> 
       <div class="red"></div> 
       <div class="white"></div> 
      </div> 

      </div> 
     </div> 
     </div> 
     <div class="yellow"> 

     </div> 
    </div> 
    </div> 
</section> 

#mondrian { 
    border: solid #000 1px; 
    margin-top: 50px; 
    width: 900px; 
    height: 600px; 
    display: flex; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    background-color: #999; 
} 

#mondrian .left { 
    background-color: #333; 
    flex-grow: 8; 
} 

#mondrian .left_container { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    height: 100%; 
} 

#mondrian .big_red { 
    background-color: red; 
    flex-grow: 8; 
    border: solid #000 8px; 
} 

#mondrian .big_white { 
    background-color: white; 
    flex-grow: 4; 
    border: solid #000 8px; 
} 

#mondrian .middle { 
    background-color: #666; 
    flex-grow: 3; 
} 

#mondrian .middle_container { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    height: 100%; 
} 

#mondrian .small_yellow { 
    background-color: yellow; 
    flex-grow: 2; 
    border: solid #000 8px; 
} 

#mondrian .small_white { 
    background-color: white; 
    flex-grow: 6; 
    border: solid #000 8px; 
} 

#mondrian .small_blue { 
    background-color: blue; 
    flex-grow: 4; 
    border: solid #000 8px; 
} 

#mondrian .right { 
    background-color: #999; 
    flex-grow: 6; 
} 

#mondrian .right_container { 
    display: flex; 
    justify-content: center; 
    height: 100%; 
    flex-direction: column; 
} 

#mondrian .many_boxes { 
    flex-grow: 4; 
} 

#mondrian .many_boxes_container { 
    height: 100%; 
    background: yellow; 
    display: flex; 
    /* flex-direction: row;*/ 
    justify-content: center; 
} 

#mondrian .white_blue { 
    flex-grow: 6; 
    height: 100%; 
    background-color: blue; 
} 

#mondrian .red_white { 
    flex-grow: 2; 
    height: 100%; 
    background-color: red; 
} 

#mondrian .white_blue_container { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    height: 100%; 
} 

#mondrian .white_blue_container .white { 
    flex-grow: 6; 
    background-color: #fff; 
    border: solid #000 8px; 
} 

#mondrian .white_blue_container .blue { 
    flex-grow: 2; 
    background-color: blue; 
    border: solid #000 8px; 
} 

#mondrian .red_white_container { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    height: 100%; 
} 

#mondrian .red_white_container .red { 
    flex-grow: 2; 
    background-color: red; 
    border: solid #000 8px; 
} 

#mondrian .red_white_container .white { 
    flex-grow: 4; 
    background-color: #fff; 
    border: solid #000 8px; 
} 

#mondrian .yellow { 
    flex-grow: 4; 
    background-color: yellow; 
    border: solid #000 8px; 
} 

http://codepen.io/anon/pen/zNVJpq

Answer 1

變化從 '柔性成長' 爲 '柔性' #mondrian .many_boxes'的造型。

#mondrian { 
 
    border: solid #000 1px; 
 
    margin-top: 50px; 
 
    width: 900px; 
 
    height: 600px; 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex-wrap: wrap; 
 
    background-color: #999; 
 
} 
 

 
#mondrian .left { 
 
    background-color: #333; 
 
    flex-grow: 8; 
 
} 
 

 
#mondrian .left_container { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
#mondrian .big_red { 
 
    background-color: red; 
 
    flex-grow: 8; 
 
    border: solid #000 8px; 
 
} 
 

 
#mondrian .big_white { 
 
    background-color: white; 
 
    flex-grow: 4; 
 
    border: solid #000 8px; 
 
} 
 

 
#mondrian .middle { 
 
    background-color: #666; 
 
    flex-grow: 3; 
 
} 
 

 
#mondrian .middle_container { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
#mondrian .small_yellow { 
 
    background-color: yellow; 
 
    flex-grow: 2; 
 
    border: solid #000 8px; 
 
} 
 

 
#mondrian .small_white { 
 
    background-color: white; 
 
    flex-grow: 6; 
 
    border: solid #000 8px; 
 
} 
 

 
#mondrian .small_blue { 
 
    background-color: blue; 
 
    flex-grow: 4; 
 
    border: solid #000 8px; 
 
} 
 

 
#mondrian .right { 
 
    background-color: #999; 
 
    flex-grow: 6; 
 
} 
 

 
#mondrian .right_container { 
 
    display: flex; 
 
    justify-content: center; 
 
    height: 100%; 
 
    flex-direction: column; 
 
} 
 

 
#mondrian .many_boxes { 
 
    flex: 4; 
 
} 
 

 
#mondrian .many_boxes_container { 
 
    height: 100%; 
 
    background: yellow; 
 
    display: flex; 
 
    /* flex-direction: row;*/ 
 
    justify-content: center; 
 
} 
 

 
#mondrian .white_blue { 
 
    flex-grow: 6; 
 
    height: 100%; 
 
    background-color: blue; 
 
} 
 

 
#mondrian .red_white { 
 
    flex-grow: 2; 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
#mondrian .white_blue_container { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
#mondrian .white_blue_container .white { 
 
    flex-grow: 6; 
 
    background-color: #fff; 
 
    border: solid #000 8px; 
 
} 
 

 
#mondrian .white_blue_container .blue { 
 
    flex-grow: 2; 
 
    background-color: blue; 
 
    border: solid #000 8px; 
 
} 
 

 
#mondrian .red_white_container { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    height: 100%; 
 
} 
 

 
#mondrian .red_white_container .red { 
 
    flex-grow: 2; 
 
    background-color: red; 
 
    border: solid #000 8px; 
 
} 
 

 
#mondrian .red_white_container .white { 
 
    flex-grow: 4; 
 
    background-color: #fff; 
 
    border: solid #000 8px; 
 
} 
 

 
#mondrian .yellow { 
 
    flex-grow: 4; 
 
    background-color: yellow; 
 
    border: solid #000 8px; 
 
}

<section id="mondrian"> 
 
    <div class="left"> 
 
    <div class="left_container"> 
 
     <div class="big_red"></div> 
 
     <div class="big_white"></div> 
 
    </div> 
 
    </div> 
 
    <div class="middle"> 
 
    <div class="middle_container"> 
 
     <div class="small_yellow"></div> 
 
     <div class="small_white"></div> 
 
     <div class="small_blue"></div> 
 
    </div> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="right_container"> 
 
     <div class="many_boxes"> 
 
     <div class="many_boxes_container"> 
 

 
      <div class="white_blue"> 
 
      <div class="white_blue_container"> 
 
       <div class="white"></div> 
 
       <div class="blue"></div> 
 
      </div> 
 
      </div> 
 
      <div class="red_white"> 
 

 
      <div class="red_white_container"> 
 
       <div class="red"></div> 
 
       <div class="white"></div> 
 
      </div> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="yellow"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</section>