<h4>说明</h4>
<div>
 <img src="https://www.w3cplus.com/sites/default/files/blogs/2018/1811/flex-19.png" alt="">
</div>

<div class="outter" data-attr="Browser">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

<div class="outter2" data-attr="JavaScript">
 <div class="div1"></div>
 <div class="div2"></div>
</div>

.outter {
  outline : solid 1px black;
  display: flex;
 
   .div1::after, .div2::after {
    position: absolute;
    bottom: 100%;
    right: 0;
   }
 
  .div1 {
   position: relative;
   &::after {
    content: 'flex-basis:400px;';
   }
    height:100px;
    background : red;
    flex-grow:5;
    flex-shrink:5;
    flex-basis:400px;
  }

  .div2 {
   position: relative;
   &::after {
    content: 'flex-basis:200px;';
   }
    height:100px;
    background : blue;
    flex-grow:1;
    flex-shrink:1;
    flex-basis:200px; //預借空間
  }
}


.outter2 {
  outline : solid 1px black;
  display: flex; 
  .div1{
    flex: 5 5 auto;
    height:100px;
    background: red;
  }

  .div2{
    flex: 1 1 auto;
    height:100px;
    background: blue;
  }
}

[data-attr] {
 position: relative;
 margin: 10px 0;
 
 &::before {
  content: attr(data-attr);
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translate(-50%, 0);
  padding: 10px;
  background: linear-gradient(to right, #f36, #f63);
  color: #fff;
  border-radius: 5px;
  z-index: 2;
 }
}

$( window ).resize(calc)
$(calc)

function calc() {
  var outter_width = $('.outter').width()
  var basis1 = parseInt($('.div1').css('flex-basis'))
  var basis2 = parseInt($('.div2').css('flex-basis'))
  var total_basis = basis1 + basis2;
  var remain = outter_width - total_basis;

  var shrinkWidth1 = basis1 + remain * rateShrinkPart('.div1');
  var shrinkWidth2 = basis2 + remain * rateShrinkPart('.div2');

  var growWidth1 = basis1 + remain * rateGrowPart('.div1');
  var growWidth2 = basis2 + remain * rateGrowPart('.div2');

//   console.log('-------------------------')
//   console.log('shrink div1:', shrinkWidth1, `${basis1} + ${remain} * ${rateShrinkPart('.div1')}`)
//   console.log('shrink div2:', shrinkWidth2, `${basis1} + ${remain} * ${rateShrinkPart('.div2')}`)

//   console.log('grow div1:', growWidth1, `${basis1} + ${remain} * ${rateGrowPart('.div1')}`)
//   console.log('grow div2:', growWidth2, `${basis1} + ${remain} * ${rateGrowPart('.div2')}`)

  var width1 = remain > 0 ? growWidth1 : shrinkWidth1;
  var width2 = remain > 0 ? growWidth2 : shrinkWidth2;

  $('.outter2 > .div1').width(width1)
  $('.outter2 > .div2').width(width2)


  function totalShrinkPart (selector) {
    var $this = $(selector);
    var elems = [...$('.outter').children()];
    return elems.reduce(function (sum, item, index) {
     sum += shrinkPart(item)
     return sum;
    }, 0)
  }

  function shrinkPart(selector) {
   var basis = parseInt($(selector).css('flex-basis'))
   var shrink = parseInt($(selector).css('flex-shrink'))
   return basis * shrink
  }

  function rateShrinkPart(selector) {
   return shrinkPart(selector) / totalShrinkPart(selector);
  }


  function totalGrowPart (selector) {
    var $this = $(selector);
    var elems = [...$('.outter').children()];
    return elems.reduce(function (sum, item, index) {
     sum += growPart(item)
     return sum;
    }, 0)
  }

  function growPart(selector) {
   var basis = 1;//parseInt($(selector).css('flex-basis'))
   var grow = parseInt($(selector).css('flex-grow'))
   return basis * grow
  }

  function rateGrowPart(selector) {
   return growPart(selector) / totalGrowPart(selector);
  }

}