Edit in JSFiddle

<div class="container">
  <div class="first">input</div>
  <div class="second">Text longer than 50px</div>
  <div class="third">Text longer than 100px</div>
  <div class="forth">
   Text longer than 100px.
  </div>
  
</div>

<input id="first" type="text">

<div id="width"></div>
<div id="char-l" style="display: inline; visibility: hidden">l</div>
<div id="width-of-l"></div>

.container {
  width: 600px;
  border: 1px solid blue;
  margin: 0 auto;
  display: flex;
}

.container > div {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.first {
  background: lightblue;
  flex: none;
}

.second {
  min-width: 50px;
  background: lightyellow;
  flex: none;
}

.third {
  min-width: 100px;
  background: lightgreen;
  flex-shrink: 1;
}

.forth {
  min-width: 100px;
  background: lightblue;
  flex-shrink: 1000;
}

$('#first').on('input', function (e, ui) {
  $('.first').text($(e.target).val());
  var output = 'Actual width of "first": ' + $('.first')[0].getBoundingClientRect().width + 'px';
  output += '<br>Actual width of "second": ' + $('.second')[0].getBoundingClientRect().width + 'px';
  output += '<br>Actual width of "thrid": ' + $('.third')[0].getBoundingClientRect().width + 'px';
  output += '<br>Actual width of "fourth": ' + $('.forth')[0].getBoundingClientRect().width + 'px';
  output += '<br>Actual width of "container": ' + $('.container')[0].getBoundingClientRect().width + 'px';
  $('#width').html(output);
});

$('#width-of-l').text('Actual width of character "l" is: ' + $('#char-l')[0].getBoundingClientRect().width + 'px');