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和其他浏览器中完美运行？

1 个答案: