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

Question

No idea what im doing wrong, but it just wont work in Chrome. I've tried changing the height to different values but with no use. The problem is the height on the .many_boxes_container wont work. Its working i firefox, but not i Chrome, and my teacher can see the problem.

    <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

The problem is that you don't have a defined `height` on `.right`. — Michael Benjamin, Feb 20 '17 at 13:19

score 0 · Accepted Answer · answered Feb 20 '17 at 13:18

Change the styling for '#mondrian .many_boxes' from 'flex-grow' to '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>

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

1 Answers1