<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%);
    }
    
  }
}
View Compiled
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>`
  });
};

window.addEventListener("resize", calculatePerc);
window.addEventListener("load", calculatePerc);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.