css - Flexbox 嵌套列

Question

我正在尝试将一些 flexbox 列嵌套在 flexbox 中。我有这个 HTML:

<div class="container">
  <div class="row flex height">
    <div class="col-md-6 red">
    </div>
    <div class="col-md-6 orange">

      <div class="flex flex-columns">
        <div class="row black flex">
          <div class="col-md-3 yellow">
          </div>
          <div class="col-md-9 green">
          </div>
        </div>

        <div class="row white flex">
          <div class="col-md-6 blue">
          </div>
          <div class="col-md-6 indigo">
          </div>
        </div>
      </div>

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

我的 CSS 是这样的:

.container {
  border: 1 px solid pink;
}

.height {
  min-height: 500px;
}

.flex {
  box-sizing: border-box;
  display: flex;
}

.flex-columns {  
  display: flex;  
  flex-direction: column;
}

.row {
  flex: 1;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.indigo {
  background-color: indigo;
}

.violet {
  background-color: violet;
}

.black {
  background-color: black;
}

.white {
  background-color: pink;
}

这是一个图表，说明了我正在努力实现的目标:

这是我的代码笔:http://codepen.io/r3plica/pen/PqWqKx?editors=110

希望您能理解我正在尝试做什么，但我无法让它正常工作。谁能帮忙？

Answer 1

如果我理解的很好，你想要

.flex-columns {  
  display: flex;
  flex-direction: row;
}
.row {
  flex: 1;
}

@import '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css';
.flex {
  min-height: 500px;
  box-sizing: border-box;
  display: flex;
}
.flex-columns {  
  box-sizing: border-box;
  display: flex;
  align-content: stretch;
}
.row {
  flex: 1;
  margin: 0; /* Remove stupid bootstrap margins */
}
.red    { background-color: red;    }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green  { background-color: blue;   }
.blue   { background-color: orange; }
.indigo { background-color: indigo; }
.violet { background-color: violet; }
.black  { background-color: black;  }
.white  { background-color: white;  }

<div class="container">
  <div class="row flex">
    <div class="col-md-6 red">
    </div>
    <div class="col-md-6 orange">
      <div class="flex flex-columns">
        <div class="row black"></div>
        <div class="row violet"></div>
      </div>
    </div>
  </div>
</div>