CSS - 溢出滚动不起作用

Question

我有以下标记（请参阅我的Plunker）：

<div class="workflow-step-container">
  <div class="step-container">
      <div class="step-bubble completed">1</div>
      <span class="divider"></span>
  </div>
  <div class="step-container">
      <div class="step-bubble completed">2</div>
      <span class="divider"></span>
  </div>
  ...
</div>

步骤（气泡）的数量可能会有所不同。我想要发生的是，如果气泡数量超过容器宽度，我希望气泡容器能够水平滚动。目前，内容只是换行。

我添加了overflow-x: auto;，但这似乎不起作用。

提前致谢

更新 将white-space:nowrap; 添加到我的.workflow-step-container 样式后，气泡现在不会按需要包裹。但是，在我的实际项目中，内容会继续包装并且永远不会滚动。 Here 是截图。我尝试将.workflow-step-container div 包装在另一个我设置为overflow-x: hidden; 的div 中，但这没有任何作用。这是Plunker。

Answer 1

您可以简单地将父元素的white-space property 更改为nowrap 以防止内联级元素换行。这样做会在内容溢出时添加一个水平滚动条。

Updated Example

.workflow-step-container {
  overflow-x: auto;
  white-space: nowrap;
}

---

根据您的更新，您需要将table-layout: fixed/width: 100% 添加到嵌套的祖先table 元素中。

问题在于table 元素的宽度由.workflow-step-container 元素的最大宽度决定。添加100% 的宽度会强制父元素采用其父元素的宽度，table-layout: fixed 会更改布局算法以允许这样做。

Updated Example

.col-xs-8 table {
  table-layout: fixed;
  width: 100%;
}