Overflow scrolling for list

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 the script: http://jsfiddle.net/cce08n83/

Basically, as you can see, the purples are too wide in width to fit inside the wrapper, so they go to the next line. However, I really want it to add overflow-x: scroll

when it gets too big, instead of discarding it. But I don't want the scrollbar to appear for the entire element inside the wrapper, right below the purple faces?

I tried adding: width: 100%; overflow-x: scroll;

to the ul, but it didn't work.