Flexbox shrink test

by lotabout

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<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>

CSS

.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;
}

JavaScript

$('#first').on('keydown', function (e, ui) {
  $('.first').text($(e.target).val());
})