设置为内联块的Div是重叠的，不会移动到垂直堆栈

Question

我有一个使用JQUERY拉入的div列表

div.box_spead_3 {
  display: inline-block;
  width: 33%;
  background: blue;
  vertical-align: top;
  /* float: left; */
}
div.box_spead_3 div.content {
  margin: 10px;
  background: #fff;
  min-height: 200px;
  min-width: 200px;
  border-radius: 4px;
  overflow: auto;
}

<div class="box_spead_3">
  <div class="content property">
    <img src="/images/admin/icons/icon_property.png" alt="Property" class="icon">
    <h1><a href="#">Tower</a></h1>
    <h2>London</h2>
    <div class="seperator"></div>
    <div class="options">
      <img src="/images/admin/icons/icon_edit.png" class="property_edit" data-property-id="1" alt="Edit">
    </div>
  </div>
</div>

这个想法是，它们扩展到容器的大约三分之一，但是具有最小宽度，以便当达到最小值时，它们是垂直的。问题是，它们不是垂直的，而是在水平方向上相互重叠。

任何人都可以看到为什么会发生这种情况，如果我将其设置为固定的像素宽度，它按计划工作但我不想要这个功能。