可折叠的CSS左栏和自动展开的右栏...垂直扩展？

Question

我有一个棘手的设计要付诸实践。将有两个CSS列，左侧是左侧菜单(~300px)，不使用时会折叠到85px。当菜单折叠时，右列应该展开以填充任何可用的空间。

这本身并不是很棘手，我已经用overflow: hidden技巧实现了它(本质上与CSS layout with 2 columns, taking up all width of browser, where left column can collapse上的公认答案相同)

但是，我现在正在研究如何让这两列垂直扩展以填充可用的屏幕空间。

左边的可变宽度列似乎阻止了我使用伪列技术。除此之外我就不确定了。

我在宽度上也有CSS过渡，以便折叠/展开运动更流畅，我想要保持这一点。

我们将非常感谢您提出的任何建议。

编辑:这是我能得到的最接近的结果：http://jsfiddle.net/tsr5a/

html, body { height:100%;}
#menu { width: 100%; height: 50px; }
#container { overflow: hidden; height:100%; }
#left-column { background:yellow; float:left; height:100%; width:300px; }
#right-column { background:red; height:100%;}
#container .shrink { width:85px; }

我不确定为什么右手边的列垂直偏移了1行。还要注意的是，虽然我可以在列上设置100%的高度，但这并没有考虑到页面顶部的固定高度工具栏。

Answer 1

祝好运

您需要包含以下内容

#container{display:inline-flex;width:100%; }
#right-column{;width:100%}

JSFiddle

Answer 2

如果你从你的#container中删除了overflow: hidden;，它应该可以正常工作。

JSFiddle

#container {height:100%;}

编辑：我希望我正确理解了您的问题/问题。