使缩略图水平滚动而不使用nowrap

Question

我正在尝试使用CSS进行以下设计：

这个想法是让它在一个全宽容器中水平滚动。

我将 white-space：nowrap 添加到包装器中，但由于文本太长，它会将其输出容器。以下是该问题的屏幕截图：

请检查实时jsFiddle here

HTML：

<div class="box">
    <div class="col-lg-4 box-item">
        <div class="content">
            <h2>Lorem Ipsum is simply dummy text of the printing and typeset industry. Lorem Ipsum has been the industry's standard dummy text ever hen an with new version look.</h2>
            <h3>Ahmad Shadeed <span>- Wamda</span></h3>
        </div>
    </div>
    <div class="col-lg-4 box-item">
        <div class="content">
            <h2>Lorem Ipsum is simply dummy text of the printing and typeset industry. Lorem Ipsum has been the industry's standard dummy text ever hen an with new version look.</h2>
            <h3>Ahmad Shadeed <span>- Wamda</span></h3>
        </div>
    </div>
</div>

CSS：

.box {
  white-space: nowrap;
  height: 300px;
  overflow-x: scroll;
  width: 100%;
  margin-top: 30px;
}
.box .box-item {
  background: #eeeeee;
  margin: 0 10px;
  transition: background 0.4s ease;
  display: inline-block;
  white-space: nowrap;
  float: none;
}

PS：我读到了关于使用display：table和table-cell，是否有可能与他们一起使用的想法？

谢谢，

Answer 1

css由内部元素继承。您可以通过添加诸如

之类的规则为子项指定拟合css

.content {
    white-space: normal;
    padding: 0px 10px;
}

In your fiddle