html - chrome:インラインブロック内の浮動要素の「ゴースト」幅

Question

テスト ケースhttp://codepen.io/anon/pen/hFumw。
クロムを除くすべてのブラウザで正常に動作します。クロムでは、要素がフローティングされないように幅.containerが計算されます。.child.oneこの動作を修正する方法はありますか?
HTML:

<div class="container">
  <div class="header">
  header
  </div>
  <div class="child one">
  </div>
  <div class="child one">
  </div>
  <div class="child one">
  </div>
</div>

CSS:

.container {
  background:red;
  padding:10px;
  display: inline-block;
  overflow:hidden;
  .child {
    width:100px;
    height: 100px;
    background: green;
    float:left;
    clear:left;
    border: 1px solid blue;
  }
  .one {
    float: left;
    clear:left;
    background:yellow;
  }
  .header {
    background:blue;
  }
}

更新:

.header {
  float: left;
  width: 100%;
} 

私の特定のケースでは受け入れられません。