Css 仅具有垂直滚动条和自动调整宽度的Div元素

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

我想实现的是，菜单的所有级别都具有相同的高度，在内容溢出高度的级别上有一个垂直滚动条。同时，我想宽度调整为内容没有水平滚动条。它几乎按照我的要求工作，除了divs的宽度似乎没有根据滚动条的宽度进行调整，滚动条最终隐藏了内容。如下图所示：

我的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中可能并不意外。

---

如果有人能指出如何达到预期效果，我将不胜感激。

您遇到了浏览器实现问题。每个浏览器的“chrome”功能各不相同。我能想到的唯一解决方法是在每个块的右侧添加填充，以说明滚动条的可能存在。这似乎是在元素内部而不是外部添加滚动条的问题。填充不是一个实际的解决方案。我必须检测哪些菜单有滚动条，并且只为那些添加填充。否则会有很多难看的填充。因为浏览器决定了滚动条的放置位置和方式，这不是CSS可以直接控制的问题。你需要做些变通。您可以尝试将这些列包装在一个div中，并将滚动条应用于包装器。我不知道它是否对你有用，但值得一试。我还不能回答我自己的问题。在进行了大量搜索和尝试不同的东西之后，我唯一能为我做的事情是检查菜单中的条目数是否大于指示高度的最左边菜单中的项目数，如果是，添加滚动条的宽度。如何确定滚动条的宽度可以通过谷歌搜索轻松找到。