尽管被父隐藏，但图像仍溢出到下一列

Question

我有一个带有多个子元素的两列容器。我使用隐藏的溢出来仿造每个孩子内部图像的高度，但是图像的隐藏部分显示在下一列中。

<section class="container">
     <div class="list">
          <ul>
               <li>
                    <div class="preview"><img src="" /></div>
                    <div class="title"><span>title</span></div>
               </li>
          </ul>
     </div>
     <div class="list">
          <ul>
               <li></li>
          </ul>
     </div>
</section>

.container {
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 25px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    padding: 20px;
}

.list {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-bottom: 25px;
    padding: 3px 0;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
    display: table;
}

.preview {
    position: relative;
    max-height: 200px;
    overflow: hidden;
    margin-bottom: 5px;
}

.preview img {
    width: 100%;
    vertical-align: bottom;
}

因此，我将获得2列，每列包含一个列表div，预览div将阻止图像泄漏到图像的外部，但仅限于其父内部。因此，它不会泄漏到其下方的标题中，但是会根据浏览器的大小在第二栏中进行扩展和收缩。