Display horizontal scrollbar and force horizontal overflow in LI elements

Question

I have some CSS and HTML that are as follows. There's a javascript code that turns the .tab into a tabbed element of #tab-container. Since #tab-container has fixed width and height if content of .tab exceeds width/height either is becomes hidden or overflows. In the case of UL, I want it to overflow and have scrollbars within the div.tab . Only a horizontal scrollbar should appear. I tried with the code below, but for some reason I can only manage to scroll vertically (LI fill the width limit, then more rows appear... I want only one row + horizontal scroll). I think I can't really change the two DIVs otherwise the tabs will be broken. I need a solution within the .tab layer.

the HTML:

<div id="tab-container">
    <div class="tab">
       <ul>
           <li><img src="img01.png" width="96" height="96" /></li>
           <li><img src="img02.png" width="96" height="96" /></li>
           <li><img src="img03.png" width="96" height="96" /></li>
           <li><img src="img04.png" width="96" height="96" /></li>
       </ul>
</div>

the CSS:

#tab-container { width: 500px; height: 200px; position: relative; overflow: hidden; } 
.tab { position: relative; overflow: hidden;}
#tab-container .tab ul { position: absolute; width: auto; display: block; overflow: scroll; }
#tab-container .tab ul li { display: inline-block; position: relative; }

Solution

Change

.tab {
  overflow: hidden;
}

to

.tab {
  overflow-x: scroll; /* or auto, if you don't want the scroll bar visible all of the time. */
  overflow-y: hidden;
}

If you find your stuff is still wrapping, you may need to add white-space: nowrap to your div.tabs, or the <li>s.

Additionally, your ul's position: absolute is likely going to interfere with what you want. position: absolute takes the element out of the document flow, so it may not behave the way you want it to. If you find that it is misbehaving, try changing it to position: relative.