Force div within fixed element to scroll horizontally - html

Question

I have a fixed element locked to the bottom of the page spanning the full width of the window. There are two floating elements (they are clearfixed in the actual code, but not in the fiddle) within this element. The rightmost element is of fixed width and the leftmost element's width is determined by a css calc. The leftmost element's child is significantly wider than it, but it is not causing an overflow scrollbar to appear.
Fiddle: http://jsfiddle.net/hMgR5/3/
Now, one possible solution would be to forgo the native browser support for scrolling and add my own scrolling buttons on both sides of the viewing element, but I would prefer using the browser's native support of scrolling if possible unless user experience with it done this way has been poor.
EDIT: The problem is that the child elements have the same height as the fixed position element. Because of this, the scrollbar is being rendered beneath the fixed element, preventing the user from interacting with it. A more savvy solution may be necessary: possibly doing away with floats and moving to absolute positioning with padding on the end of the overflowing element may work better.
Markup:
<div class="bottom-bar">
<div class="viewer">
<ul class="list">
<li class="element">Hello</li>
<li class="element">World</li>
<li class="element">Hello</li>
<li class="element">World</li>
<li class="element">Hello</li>
<li class="element">World</li>
</ul>
</div>
<div class="other-bar-item">
Other Item
</div>
Styles:
*{
box-sizing: border-box;
font-size: 1em;
font-weight: bold;
color: white;
}
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: #1a1a1a;
}
.other-bar-item{
float: left;
width: 200px;
text-align: center;
}
.viewer{
float: left;
width: calc(100% - 200px);
overflow-x: auto;
}
.list{
margin: 0;
padding: 0;
width: 2000px;
height: 40px;
}
.element{
list-style: none;
display: inline-block;
width: 200px;
height: 100%;
position: relative;
background-color: navy;
border-right: 2px solid white;
text-align: center;
}

Answer 1

here is the link: jsfiddle
you don't have to set a high width for your ul,
you can set white-space: nowrap; to parent element and set inline-block display for its children. this would force parent to be as wide as needed.
and you don't need to set overflow:auto; for parent cause it does that automatically.
and here is the code:
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: #1a1a1a;
overflow-y: hidden;
white-space: nowrap;
}
.other-bar-item{
display: inline-block;
width: 200px;
text-align: center;
background-color: red;
}
.viewer{
display: inline-block;
}
.list{
margin: 0;
padding: 0;
height: 40px;
}
.element{
list-style: none;
display: inline-block;
width: 200px;
height: 100%;
position: relative;
background-color: navy;
border-right: 2px solid white;
text-align: center;
}

Answer 2

On my mac the scroll bar seems to show up on it's own, not sure why PC was different but, to have the horizontal scroll bar show up (but not a vertical), add the following to the viewer class:
overflow-y: hidden;
height: 100%;