Div元素只有垂直滚动条和自动调整宽度

Question

我正在实施动态菜单。根据JSON请求的结果填充内容。菜单有不同的级别，每个级别取决于前一级别的选择。

我想要实现的是菜单的所有级别都具有相同的高度，对于那些内容将溢出高度的级别的垂直滚动条。同时，我想为内容调整宽度（没有水平滚动条）。它几乎按照我想要的方式工作，除了看起来div的宽度没有根据滚动条的宽度进行调整，滚动条最终隐藏了内容。如下图所示：

broken menu http://s15.postimage.org/txiietdt7/menu.jpg

我的CSS如下：

.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;
}

此行为出现在Chrome和Firefox中，但（可能并非出乎意料）不在IE8中。 如果有人能指出如何达到预期效果，我将不胜感激。