使用隐藏的溢出元素设置样式

Question

我正在尝试在我的页面上创建一个包含内联块div（具有不同长度）的部分。此外部div将使用其父级的宽度进行缩放（父级具有col-md-8）。我试图看看是否有可能浮动所有内部个别div左边的右边距并让它们消失在父div的右边缘。显然我错过了一些东西，因为这些东西没有按照我希望的方式排列。

.outer {
  position: relative;
  width: 330px;
  height: 140px;
  overflow-y: hidden;
  background-color: red;
}

.box {
  display: block;
  height: 130px;
  float: left;
  margin-right: 20px;
  background-color: grey;
  border: 1px solid #333;
}

.box-1-col {
  width: 130px;
}

.box-2-col {
  width: 260px;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">

    </div>
    <div class="col-md-8">
      <div class="outer clearfix">
        <div id="box-1" class="box box-2-col">
          This is box 1
        </div>
        <div id="box-2" class="box box-1-col">
          This is box 2
        </div>
        <div id="box-3" class="box box-1-col">
          This is box 3
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/xc66s1L8/4/