html - 如何使用 wrap 和 inline-block 使 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 属性更改为 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>