CSS3 flexboxes: flex-grow and flex-shrink demo with fixed flex-basis

Both items have flex-basis: 200px defined. In 'equilibrium situation' they'll get those widths exactly. If there's less space, the second one shrinks 3x faster than the first. If there's more space, the first one grows 5x faster than the second.

HTML

<div class="container">
  <div class="child one">
    Child One<br>Lorem ipsum<br>dolor sit amet<br>This is a bit longer line
  </div>
  
  <div class="child two">
    Two
  </div>
</div>

CSS

div {  border: 3px solid; }
.child {
  padding:10px;  margin:10px;
  background-color:#eee;
}
.container {
  padding: 10px;
  background-color:yellow;
  display: -webkit-flex;
  display: flex;
}

.child.one {
  -webkit-flex: 5 1 200px;
  flex: 5 1 200px;
  color: green;
}

.child.two {
  -webkit-flex: 1 3 200px;
  flex: 2 3 200px;
  color: purple;
}

JavaScript

// Both items have flex-basis: 200px defined.

// In 'equilibrium situation' they'll get those widths exactly.
// If there's less space, the second one shrinks 3x faster than the first.
// If there's more space, the first one grows 5x faster than the second.

// Works in Firefox, Chrome and Opera.