To achieve a ratio of 1:2 using flex, create containers for each "direction." Set the ratios using flex-grow: 1 and flex-grow: 2;.
It's crucial to include:
flex-shrink: 0;
flex-basis: 0;
if you want the ratio to remain consistent regardless of the content inside the containers.
A more concise way is:
flex: [flex-grow], [flex-shrink], [flex-basis];
However, this method is not supported by Internet Explorer, so it is advisable to use the longer version.
.out-container {
display: flex;
flex-direction: row;
}
.inner-cont {
display: flex;
flex-direction: row;
flex-grow: 2;
}
.container {
flex-grow: 2;
flex-shrink: 0;
flex-basis: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
width: 70vw;
}
.left,
.right,
.middle,
.top {
padding: 10px;
border: 1px solid black;
}
.left {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
background-color: #aaeffe;
}
.top {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
background-color: #69e2fd;
}
.middle{
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
background-color: #38d0fd;
}
.right{
flex-basis: 0;
flex-grow: 1;
flex-shrink: 0;
background-color: #1fbbfb;
}
<div class="out-container">
<div class="left">Left Content</div>
<div class="container">
<div class="top">Top content</div>
<div class="inner-cont">
<div class="middle">Middle Content</div>
<div class="right">Right Content</div>
</div>
</div>
</div>