Overflow scroll for list

Question

I have the following html:

<div class='wrapper'>
    <ul>
         <li>Test</li>
         <li>Test</li>
         <li>Test</li>
         <li>Test</li>
    </ul>
    <div class='content'>
    </div>
</div>

Here's a fiddle: http://jsfiddle.net/cce08n83/

Basically, as you can see, the purple li's are too big width-wise to fit inside the wrapper, so they drop to the next row. However, I really want it to add a overflow-x: scroll, when it gets too big, instead of having it drop. But I don't want the scrollbar to show for the entire element inside the wrapper, just underneath the purple li's?

I tried adding: width: 100%; overflow-x: scroll; to the ul, but that didn't work.

Josh Crozier · Accepted Answer · 2015-01-02 00:31:12Z

2

Since the li elements are inline-block, you could use white-space: nowrap to prevent them from wrapping.

Updated Example

ul {
    white-space: nowrap;
    overflow-x: scroll;
}

answered Jan 2, 2015 at 0:31

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

Collectives™ on Stack Overflow

Overflow scroll for list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related