私は自分の問題を示すために単純な jsfiddle を作成しました: http://jsfiddle.net/9MD43/
Chrome でボックスのサイズを変更しても、ボックスは緑色のままです。これが私の望みです。Firefox でボックスのサイズを変更しようとすると、フレックス ボックスが縮小されて何も表示されなくなるため、ボックスが赤くなります。Internet Explorer 10 は Chrome と同じように動作し、ボックスは緑色のままです (この例には示されていません)。
この問題は、スクリプトから .draggable コマンドを削除することで軽減できます。
$("#outer").resizable().draggable(); // <-- removing .draggable() will keep the box green in Firefox after resizing
マークアップは非常に単純で、派手なものは何もありません:
<div id="outer">
<div id="content">
<div id="list">
</div>
</div>
</div>
"#outer" はフレックス ボックスで、"#content" はフレックス 1 です。
「#content」は相対配置、「#list」は絶対配置です。私のアプリの完全版では、アイテムを動的に "#list" div に追加し、overflow: scroll を適用しています。これが、この単純な例では CSS が異常に見える理由です。
これは jquery の .draggable や Firefox のバグですか? また、この問題に対する明確な回避策はありますか?
[編集] もっと単純な例: http://jsfiddle.net/LXmuL/
ボックスのサイズを変更すると、Firefox ではフレックスが折りたたまれますが、Chrome では折りたたまれません。これは、ボックスの背景色で確認できます。