html - 另一个溢出-x : hidden vs overflow-y:visible issue

Question

我正在尝试构建一个与 Firefox 类似的选项卡溢出 UI，结合使用固定宽度的容器和中间包含选项卡的流体宽度容器。

棘手的部分是当标签容器中的标签太多时。我添加了 overflow-x:hidden; white-space:nowrap 将所有内容保存在容器内并在一行中。选项卡中有上下文菜单，因此我需要在单击选项卡时也显示这些菜单。 (故意省略了 js，因为我只是想解决这个显示问题，即 css)。

这是一个 fiddle ，显示了我正在努力完成的事情。 http://jsfiddle.net/Add9Y/3/ .

如果您删除第 5 行和第 13 行 css 中关于溢出的注释，您将能够在第一个选项卡下方看到子菜单，但现在溢出会覆盖右侧的控件。

知道如何在不依赖 javascript 的情况下让这些排列起来吗？谢谢!

Answer 1

奇怪的是，关于这个确切问题只有一篇文章:

http://css-tricks.com/popping-hidden-overflow/

这是应用了此解决方案的更新后的 JSFiddle:

http://jsfiddle.net/Add9Y/4/

更新了部分 CSS:

.list > div {
    display:inline-block;
    //overflow-y:visible;
    line-height:48px;
    padding:0 5px;
    border:1px solid #bada55;
    //position:relative;
}

当我测试它时(通过 Chrome)，这似乎有效，但我没有进行太广泛的测试。