How to achieve this flexbile layout using flexbox

Question

How to achieve this layout with flexbox, that each element automatically takes up the space and slides in the empty space?

see this image for example

Answer 1

Here's the answer

#parent {
  display: flex;
}

#main {
  flex: 10;
}

#left {
  flex: 3;
  margin-left: 20px;
}

.left-box {
  margin-bottom: 15px;
  height: 400px;
  background: #7f7f7f;
}

.right-box {
  height: 400px;
  background: #42664d;
}

.big-box {
  background: orange;
  height: 100%;
}

<div id="parent">
  <div id="main">
    <div class="left-box">
      Left Box
    </div>
    <div class="right-box">
      Left Box
    </div>
  </div>
  <div id="left">
    <div class="big-box">Big Box</div>
  </div>
  <div></div>
</div>