Div elements with vertical only scroll bar and auto adjusting width
I am implementing a dynamic menu. The contents are populated based the result of JSON requests. The menu has different levels, each level depends on the choice made at the previous level.

What I would like to achieve is for all the levels of the menu to have the same height, with a vertical scroll bar for those levels where the content would overflow the height. At the same time, I would like the width to be adjusted for the content (no horizontal scroll bar). It is almost working as I want it, except that it seems like the width of the divs is not adjusted for the width of the scroll bar, and the scroll bar ends up hiding the content. As in the image below:

![broken menu](http://s15.postimage.org/txiietdt7/menu.jpg)

My CSS is as follows:

    .menu {
     border-style: solid;
     border-width: 2px;
     border-color: black;
     border-radius: 3px;
     background-color: rgb(200, 230, 255);
     margin: 0px;
     padding-bottom: 2px;
     position: absolute;
     overflow: auto;
     overflow-x: hidden;
     -ms-overflow-x: hidden;
     white-space: nowrap;
    }

    .menuItem {
     border-style: solid;
     border-width: 1px;
     border-color: black;
     border-radius: 2px;
     background-color: rgb(220, 245, 255);
     margin: 2px;
     margin-bottom: 0px;
     padding: 2px;
     text-align: center;
    }

This behavior is present in Chrome and Firefox, but (perhaps not unexpectedly) not in IE8.
If someone could point out how to achieve the desired effect, I would greatly appreciate.
Div elements with vertical only scroll bar and auto adjusting width
===

I am implementing a dynamic menu. The contents are populated based the result of JSON requests. The menu has different levels, each level depends on the choice made at the previous level.

What I would like to achieve is for all the levels of the menu to have the same height, with a vertical scroll bar for those levels where the content would overflow the height. At the same time, I would like the width to be adjusted for the content (no horizontal scroll bar). It is almost working as I want it, except that it seems like the width of the divs is not adjusted for the width of the scroll bar, and the scroll bar ends up hiding the content. As in the image below:

![broken menu](http://s15.postimage.org/txiietdt7/menu.jpg)

My CSS is as follows:

    .menu {
     border-style: solid;
     border-width: 2px;
     border-color: black;
     border-radius: 3px;
     background-color: rgb(200, 230, 255);
     margin: 0px;
     padding-bottom: 2px;
     position: absolute;
     overflow: auto;
     overflow-x: hidden;
     -ms-overflow-x: hidden;
     white-space: nowrap;
    }

    .menuItem {
     border-style: solid;
     border-width: 1px;
     border-color: black;
     border-radius: 2px;
     background-color: rgb(220, 245, 255);
     margin: 2px;
     margin-bottom: 0px;
     padding: 2px;
     text-align: center;
    }

This behavior is present in Chrome and Firefox, but (perhaps not unexpectedly) not in IE8.
If someone could point out how to achieve the desired effect, I would greatly appreciate.