如何使用自动换行和内联阻止功能使JavaScript卡溢出

Question

我正在尝试让div内联一排，并在它们离开屏幕时滚动。

这就是我所拥有的。抱歉，card div没有格式化。

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.card {
    display: inline-block;
 }

<div class="scrolling-wrapper">
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
</div>

当内容适合card div时，它可以正常工作。但是，由于white-space: nowrap而无法容纳时，卡外的东西就会溢出。但是，如果我将空白属性更改为white-space: initial/normal或其他任何内容，就解决了溢出问题，但是卡不再滚动并环绕到下一行：

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: initial;
}
.card {
  display: inline-block;
}

<div class="scrolling-wrapper">
  <div class="card"><h2>Card content content content content Card content content content content Card content content content content Card content content content content Card content content content content </h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
</div>

我认为display: inline-block和white-space:nowrap可能会发生冲突，但是我不知道这是否成立。感谢您的帮助！

Code credits

Answer 1

尝试使用下面的代码段，然后确认是否要这样做。

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.card {
  display: inline-block;
  max-width: 200px;
  white-space: initial;
}

<div class="scrolling-wrapper">
  <div class="card">
    <h2>Card content content content content Card content content content content Card content content content content Card content content content content Card content content content content</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
  <div class="card">
    <h2>Card</h2>
  </div>
</div>

Answer 2

您可以拥有float:left而不是display:inline-block

.card {
  float: left;
}