1

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> and won't scroll HORIZONTALLY.

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;           */

}

http://jsfiddle.net/7EYTh/

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

T J
  • 42,762
  • 13
  • 83
  • 138
whtlnv
  • 2,109
  • 1
  • 25
  • 26
  • Your `#iWantToBeHuge` width is set to auto, which adjusts to the parent's size. Change it to like 500px and magic should happen. – jeremy Jul 06 '14 at 06:50
  • Yeah, i realised I missed that part, there's a reason I havent used a fixed size, the contents can be anything between 30px and 3000px wide. – whtlnv Jul 06 '14 at 06:54
  • possible duplicate of [Expand container div with content width](http://stackoverflow.com/questions/6115353/expand-container-div-with-content-width) – jeremy Jul 06 '14 at 06:54
  • @Jeremy as i stated in the code, I already tried the solutions provided in that question, and they didn't work. – whtlnv Jul 06 '14 at 06:58

2 Answers2

3

Jesus Rugama's answer explains why there's no vertical overflow. Since you're looking for horizontal overflow,

Currently nothing is horizontally overflowing your container. If you want scrollbar, you should create overflow, for example

#iWantToBeHuge {
  width: auto;
  height: 95%;
  white-space:nowrap;
}

Demo

Community
  • 1
  • 1
T J
  • 42,762
  • 13
  • 83
  • 138
2

You shouldnt be using height: 95%; , this means when you use relative height the element uses the parent to determine the size. So you are telling #iWantToBeHuge to use 95% of #mainContainer height.

If you want to see a scrollbar try changing #iWantToBeHuge height to a bigger size than #mainContainer ie: 600px. Or just remove the height style so it can adapt to the ul.

EDIT: try using this CSS for horizontal scroll:

#mainContainer{
    width: 200px;
    height: 600px;
    overflow: auto;
}

#iWantToBeHuge ul li{
    white-space: nowrap;
}
JesusRugama
  • 51
  • 1
  • 2
  • Sorry, the problem is not the vertical scroll but the horizontal. And I can't use a fixed size for either, the content's size vary greatly. – whtlnv Jul 06 '14 at 06:55
  • @whitelionV you didn't mention it in question. usually when you say `scroll`, especially by the looks of your demo, people assumes it's vertical `scroll` – T J Jul 06 '14 at 06:57
  • @TilwinJoy I edited the question tried making it a lil' more clear. – whtlnv Jul 06 '14 at 07:01