``````<h1>
Proportionality with Flex-basis
</h1>

<span>
flex: 3 1 200px / flex: 1 1 400px
</span>
<div class="parent">
<div style="flex: 3 1 200px;">
</div>
<div style="flex: 1 1 400px;">
</div>
</div>
<span>
flex: 1 3 200px / flex: 1 1 400px;
</span>
<div class="parent">
<div style="flex: 1 3 200px;">
</div>
<div style="flex: 1 1 400px;">
</div>
</div>
<span>
flex: calc((100% / 3) * 1) / flex: calc((100% / 3) * 2)
</span>
<div class="parent">
<div style="flex: calc((100% / 3) * 1);">
</div>
<div style="flex: calc((100% / 3) * 2);">
</div>
</div>
<span>
flex: auto 3 1; / flex: auto 2 1;
</span>
<div class="parent">
<div style="flex: auto 3 1">
</div>
<div style="flex: auto 2 1">
</div>
</div>
<span>
flex: 33%; / flex: 66%;
</span>
<div class="parent">
<div style="flex: 66.66%;">
</div>
<div style="flex: 33.33%;">
</div>
</div>``````
``````* {
font-family: sans-serif;
}

.parent {
display: flex;
background: grey;
margin-bottom: 10px;

div {
height: 100px;
background: darkgreen;
color: white;
position: relative;

&:nth-of-type(2) {
background: green;
}

span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

}
}``````
``````let flexChildren = document.querySelectorAll(".parent div");

let calculatePerc = () => {
flexChildren.forEach((element, index) => {
let width = element.offsetWidth;
let parentWidth = element.parentElement.offsetWidth;
let percOfParent = `\${((width / parentWidth) * 100).toFixed(0)}%`;

element.innerHTML = `<span>\${percOfParent}</span>`
});
};