Flexbox nested columns

Question

I am trying to nest some flexbox columns inside a flexbox. I have this 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>

and my CSS is like this:

.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;
}

Here is a diagram illustrating what I am trying to achieve:

and here is my codepen: http://codepen.io/r3plica/pen/PqWqKx?editors=110

Hopefully you can understand what I am trying to do, but I can't get it to work properly. Can anyone help?

Answer 1

I modified your HTML and CSS to make the results fit the image (colors notwithstanding).

1. Added a padding to every div
2. Added flex-grow to some of the flex-items, to make them fill their parents (by adding the row class to them)
3. Removed div.flex.flex-columns and change its classes to its parent, so it changes to div.col-md-6.orange.flex.flex-columns. It's superflous and messing your layout.
4. Modify the flex-grows of the purple divs (in the image) to change their ratios

You can run the following snippet to see the results. The inner divs still need some padding to really mimic the image, but I'm guessing that's not the main point of your question.

.container {
  border: 1px solid pink;
}
div {
  padding: 10px;
}
.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;
  flex-grow: 2;
}
.green {
  background-color: green;
  flex-grow: 3;
}
.blue {
  background-color: blue;
  flex-grow: 3;
}
.indigo {
  background-color: indigo;
  flex-grow: 2;
}
.violet {
  background-color: violet;
}
.black {
  background-color: black;
}
.white {
  background-color: pink;
}

<div class="container">
  <div class="row flex height">
    <div class="col-md-6 red row"></div>
    <div class="col-md-6 orange row flex flex-columns">
      <div class="row black flex">
        <div class="col-md-3 yellow row"></div>
        <div class="col-md-9 green row"></div>
      </div>
      <div class="row white flex">
        <div class="col-md-6 blue row"></div>
        <div class="col-md-6 indigo row"></div>
      </div>
    </div>
  </div>
</div>

Answer 2

your .flex-column shouldn't have a flex-direction set:

.flex-columns {  
  box-sizing: border-box;
  display: flex;
  /* flex-direction: column; */
  align-content: stretch;
}

add the following to your css:

.flex-columns > .row{
  flex: 1 0 auto;
  margin: 0; /* this is to reset the column padding/margins added by bootstrap */
}

forked pen - http://codepen.io/braican/pen/PqWqvr

@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;
  /* flex-direction: column; */
  align-content: stretch;
}
.flex-columns > .row{
  flex: 1 0 auto;
  margin: 0;
}


.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 white">
        </div>
      </div>

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

Answer 3

If I understand it well, you want

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