html - 2 つの div が連続しています。右のもののサイズが変わると、左のものは利用可能なスペースに大きくなります

Question

右の div のサイズが変更された後、左の div が使用可能なスペースに対応するために拡大するときに表示される効果を実現したいと考えています。

作業したい html の例を作成しました (div はクリック可能です): http://jsbin.com/anaPIJe/3/edit?html,css,output

最善の解決策は、意図したとおりに動作するように jsbin コードを変更することです。

ありがとう！

更新私の過ち、私はCSSのみのソリューションが欲しいとは言いませんでした

Answer 1

css3 フレックスボックスを試してみてください。

http://jsbin.com/anaPIJe/9/

#container {
   display: flex;
   ...

#one {
   flex: 1;
   ....

Answer 2

動作するように、CSS と JavaScript を少し変更しました。

ここで新しいコードを表示できます: JSBin

div の周囲に配置されている目に見えない境界線のため、各幅を 2 ​​つ差し引いています。

Answer 3

これを試して。

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

ここでデモ。