Q:

CSS - Overflow scrolling not working

I have the following markup (see my 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>

The number of steps (bubbles) can vary.  What I would like to happen is if the number of bubbles exceeds the container width, I would like the bubble container to become horizontally scrollable.  Currently, the content just wraps.
I've added overflow-x: auto;, but that doesn't seem to work.
Thanks in advance
Update
After adding white-space:nowrap; to my .workflow-step-container styles, the bubbles now do not wrap as desired.  In my actual project, though, the content continues to wrap and doesn't ever become scrollable.  Here is a screenshot.  I tried wrapping the .workflow-step-container div in another div to which I set overflow-x: hidden;, but that did nothing.  Here is a Plunker.

A:

You could simply change the white-space property of the parent element to nowrap in order to prevent the inline-level elements from wrapping. In doing so, a horizontal scrollbar will be added when content overflows.
Updated Example
.workflow-step-container {
  overflow-x: auto;
  white-space: nowrap;
}

Based on your update, you need to add table-layout: fixed/width: 100% to the nested ancestor table element.
The problem was that the table element's width was being determined by the maximum width of the .workflow-step-container element. Adding a width of 100% forces the parent element to take the width of its parent element, and table-layout: fixed changes the layout algorithm to allow for this.
Updated Example
.col-xs-8 table {
  table-layout: fixed;
  width: 100%;
}

