Set parent <div> width of children <div> using CSS - css

Question

I have a three column markup for which the middle column #palette( elastic column) has following innerHTML markup snippet
<div id="palette">
<div id="wrapper" style="left: -354px; top: 0px;">
<div id="colours">
<ul>
<li class="swatch"><a tite="Beige" style="background-color:beige;" class="label" href="javascript:void(0);"><span> </span></a></li>
<li class="swatch"><a tite="Bisque" ... class="label" href="javascript:void(0);"><span> </span></a></li>
<li class="swatch"><a tite="Brown" style="background-color:brown;" class="label" href="javascript:void(0);"><span> </span></a></li>
<li class="swatch"><a tite="Coral" style="background-color:coral;" onclick="setColouringColour(this);" class="label" href="javascript:void(0);"><span> </span></a></li>
....
</ul>
</div>
<div id="brush-sizes"> <span style="width:16px; height:16px;" ><span>16</span></a></span> <span class="brush badge" style="width:32px; height:32px;"><a...><span>32</span></a></span> <span class="brush badge" style="width:64px; height:64px;"><a...><span>64</span></a></span> </div>
<div id="brushes"> <a class="selected btn btn-mini"...> </a> <a class="btn btn-mini"> </a> </div>
</div>
Where the following CSS rules apply
#palette {
float: left;
height: 100%;
position: relative;
width: 100%; overflow:hidden;
}
#wrapper {
display: inline-block;
position: absolute;
top: 0 !important;
white-space: nowrap;
width: auto;
}
Note: #palette is overflow:hidden so that #wrapper can be
scrolled using left:*n*px;. The children inside
#wrapper are all display:inline-block; clear:none;
The problem I am having is that #wrapper is not at "full width" of its children...thus I can't seem to be able to scroll to the very end.
What is the source of the problem here and how can I fix it using CSS ONLY( can it be accomplished CSS only?)

Answer 1

Apparently I needed to set one of the 2 remaining < div > to a fixed width and also tried setting the max- and min- width appropriately. Don't know why that worked