I am attempting to nest flexbox columns inside a flexbox layout. This is the HTML code I have:
<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 this is my 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;
}
Below is an illustration of what I'm aiming for:
You can view my codepen at: http://codepen.io/r3plica/pen/PqWqKx?editors=110
If you understand what I'm trying to accomplish and can provide assistance, it would be greatly appreciated!