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">
<ul>
<li> Stuff </li>
</ul>
</div>
</div>


And the CSS



#mainContainer{

width: 200px;
height: 500px;

float: left;

overflow: auto;

}

#iWantToBeHuge{

width: auto;
height: 95%;

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

}


The fiddle:


http://ift.tt/1mWlZQf


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







http://ift.tt/1oocn3f