<div class="demo-wrapper">
  <div class="container" id="container">
    <div class="item" id="one">1</div>
    <div class="item" id="two">2</div>
  </div>
  <div class="controls">


    <table>
      <caption>Control element One (1)</caption>
      <tr>
        <td>flex-basis:</td>
        <td><input type="text" value="0" onkeyup="var item=document.getElementById('one'); item.style.WebkitFlexBasis = this.value; item.style.flexBasis = this.value;"></td>
      </tr>
      <tr>
        <td>flex-grow</td>
        <td><input type="text" value="0" onkeyup="var item=document.getElementById('one'); item.style.WebkitFlexGrow = this.value; item.style.flexGrow = this.value;"></td>
      </tr>
      <tr>
        <td>flex-shrink</td>
        <td><input type="text" value="0" onkeyup="var item=document.getElementById('one'); item.style.WebkitFlexShrink = this.value; item.style.flexShrink = this.value;"></td>
      </tr>
    </table>


    <table>
      <caption>Control element Two (2)</caption>
      <tr>
        <td>flex-basis:</td>
        <td><input type="text" value="0" onkeyup="var item=document.getElementById('two'); item.style.WebkitFlexBasis = this.value; item.style.flexBasis = this.value;"></td>
      </tr>
      <tr>
        <td>flex-grow</td>
        <td><input type="text" value="0" onkeyup="var item=document.getElementById('two'); item.style.WebkitFlexGrow = this.value; item.style.flexGrow = this.value;"></td>
      </tr>
      <tr>
        <td>flex-shrink</td>
        <td><input type="text" value="0" onkeyup="var item=document.getElementById('two'); item.style.WebkitFlexShrink = this.value; item.style.flexShrink = this.value;"></td>
      </tr>
    </table>

    <p class="instructions"><em><small>Note that flex-shrink has no effect when there is positive space in the container. To use it, set the flex basis on both elements such that the sum of the widths is greater than the width of the container.</small></em></p>
    <p><p>Container width: <strong id="containerWidth"></strong></p></p>
</div>
</div>
* {
  box-sizing: border-box;
}

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.demo-wrapper {
  margin: 0 auto;
  max-width: 840px;
  padding: 1em;
}

.container {
  margin: 30px auto;
  width: 100%;
  padding: 1em;
  -webkit-display: -webkit-box;
  -webkit-display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #594255;
}

.item {
  background-color: #fff;
  height: 100px;
  margin: 2px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 3em;
  color: #594255;
  -webkit-flex: 0 1 400px;
  /* flex-grow and flex-shrink are set so that the items neither grow nor shrink */

  -webkit-box-flex: 0;

  -ms-flex: 0 1 400px;

  flex: 0 1 400px;
  /* flex-grow and flex-shrink are set so that the items neither grow nor shrink */
}

.controls {
  background-color: white;
  padding: 20px;
  margin: 0 auto;
  line-height: 150%;
  border: 1px solid #ddd;
  overflow: hidden;
}

.instructions {
  clear: both;
}

table {
  float: left;
  margin: 1em 1em 2em 1em;
  min-width: 200px;
}
/*
table:last-of-type {
float: right;
}
*/

caption {
  font-size: .9em;
}

input {
  width: 50px;
}

.col {
  padding: 0 50px;
}

var containerWidth = document.getElementById("container").offsetWidth,
    value = document.getElementById("containerWidth");

value.innerHTML = containerWidth + 'px';