html - 3 列 - 带有溢流元件的中心柱流体

Question

我有一个三栏网站。外柱是固定的，中柱是流动的。我用这个实现了

<div style="display:table">
    <div style="display:table-row">
        <div style="display:table-cell">
        </div>
        <div style="display:table-cell">
        </div>
        <div style="display:table-cell">
        </div>
    </div>
</div>

（完整代码参见 jsfiddle）

现在我在中间列有一个可能变得太宽的元素。我用一个隐藏这个

overflow:auto

所以会有滚动条。

编辑：
不起作用抱歉： http: //jsfiddle.net/WtWCC/
确实起作用：http: //jsfiddle.net/WtWCC/2/

Chrome 的描述：
在提供的示例中，单击“+”直到出现滚动条（单击的次数越多，问题越明显）。带有滚动条的视图是我喜欢的：2 个固定列可见，中间列最大化。

现在调整浏览器的大小。（或 jsfiddle 窗格）

现在的问题是中间列变得更大了。右列被隐藏。

有人知道这个问题的解决方案吗？

提前致谢。

编辑：所描述的行为在 Chrome 中。在 IE 和 Firefox 中，Overflow:auto 根本不起作用。

Answer 1

您的 JSFiddle 有问题，如果这对您没有帮助，请见谅。

HTML：

<div class="wrap">
  <div class="left">
    Leftees
  </div>
  <div class="right">
    Righties
  </div>
  <div class="middle">
    Middies
  </div>
</div>

CSS：

.wrap{
    width:100%;
    overflow:hidden;
}
.left{
    float:left;
    background:red;
}
.middle{
    overflow:hidden;
    background:green;
}
.right{
    float:right;
    background:yellow;
}

jsfiddle