CSS - Overflow scrolling not working

Question

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.

Josh Crozier · Accepted Answer · 2016-02-03 20:16:10Z

3

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%;
}

edited Feb 3, 2016 at 20:16

answered Feb 2, 2016 at 18:48

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Josh Crozier Over a year ago

@im1dermike Do you have a link demonstrating it not working? I'll take a look. It is probably related to an ancestor element's width.

mellis481 Over a year ago

@JoshCrozier: Nevermind. I was able to re-create it. plnkr.co/edit/H9o97NWZrdKFtsSTskhW?p=preview Seems like it has to do with being inside a table.

Josh Crozier Over a year ago

@im1dermike Updated my answer - plnkr.co/edit/cKAty5KO2ZmpnValHSob?p=preview

Collectives™ on Stack Overflow

CSS - Overflow scrolling not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related