另一个overflow-x：hidden vs overflow-y：可见问题

Question

我正在尝试构建类似于firefox所做的制表符溢出UI，使用固定宽度容器和容纳制表符的中间的流体宽度容器的组合。

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

这是一个小提琴，显示了我想要完成的事情。 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），这似乎有效，但我没有进行太多的测试。