div within container won't scroll

Saturday, July 5, 2014

I have a dynamic <ul> inside a <div>, I want that <div> to adjust to the size of the <ul>. There's no problem with that. But when I wrap everything on a container <div> with overflow: auto, the first <div> won't adjust to the size of the <ul> but to the size of the container, so the <ul> and <li> break and splatter into the right border of the <div>.

The structure loks like:

<div id="mainContainer">
<div id="iWantToBeHuge">
<li> Stuff </li>

And the CSS


width: 200px;
height: 500px;

float: left;

overflow: auto;



width: auto;
height: 95%;

/* already tried these */
/* position:absolute; */
/* position:relatve; */
/* float: left; */


The fiddle:


Also - Adding a static size to the is not an option, the contents can be anything between 30px and 3000px wide.