为什么这在 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”的样式从 'flex-grow' 更改为 'flex'。

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

为什么这在 chrome 中不起作用？但在 Firefox 和其他浏览器中运行良好？

Why won't this work in chrome? but works perfectly fine in Firefox and other browsers?

html

css

frontend

google-chrome

flexbox