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.

Answer 1

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