How To Shrink Flex Items Height To Fit Container Heights

I am trying to display a layout below in flex . I have divs of equal width and height. I want to achieve the layout out below. By placing one item on the left and the remaining f

Solution 1:

Try this

body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  display: flex;
  min-height: 100vh;
  background: #2A3052;
}
.left {
  flex: 1;
  background: #9497A8;
  margin: 10px;
}
.right {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1;
  background: #9497A8;
  margin: 10px;
}

<divclass="container"><divclass="left"></div><divclass="right"><divclass="box"></div><divclass="box"></div><divclass="box"></div><divclass="box"></div></div></div>