CSS3 flexboxes: overflow handling via shrink with widths defined

In this scenario, flexbox has width 300px while its children 250px each. This creates overflow normally. However we've defined flex-basis: auto and different flex-shrink for the items. Opera 12 and Firefox 21 will shrink the children so they not overflow. Chrome 23 doesn't shrink the children.

HTML

<div class="container">
  <div class="child one">
    Child One<br>Lorem ipsum<br>dolor sit amet
  </div>
  
  <div class="child two">
    Child Two
  </div>
</div>

CSS

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


.child.one {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  color: green;
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child.two {
  -webkit-flex: 1 5 auto;
  flex: 1 1 auto;
  color: purple;
}

JavaScript

// In this scenario, flexbox has width 300px while its children 250px each.
// This creates overflow normally.

// However we've defined flex-basis: auto and different flex-shrink for the items. 

// Opera 12 and Firefox 21 will shrink the children so they not overflow.
// Chrome 23 doesn't shrink the children.

// To experiment, change the flex-shrink of the second item to lower value.