html - 连续两个div。当右一个改变大小时，左一个增长到可用空间

Question

我想实现一种效果，当右 div 改变大小后，左 div 正在增长以适应可用空间。

我已经构建了一个我想要使用的 html 示例（div 是可点击的）：http: //jsbin.com/anaPIJe/3/edit ?html,css,output

最好的解决方案是修改 jsbin 代码以使其按我想要的方式工作。

谢谢！

更新我的错，我没有提到我想要一个纯 CSS 的解决方案

score 2 · Accepted Answer

试试css3 flex box，

#container {
   display: flex;
   ...

#one {
   flex: 1;
   ....

score 0 · Accepted Answer

试试这个。

#container {
    display: table-row;
}
.inner {
    display:table-cell;
}

score 0 · Accepted Answer

我稍微更改了 CSS 和 JavaScript 以使其正常工作。

您可以在此处查看新代码：JSBin

由于在 div 周围放置了一个不可见的边框，我已经减去了每个宽度的 2 个

3 回答 3