CSSフレックスボックス垂直スクロールバー（列の100％の高さの列）FF/IE/EDGE

Question

私はサードパーティのアプリケーションに読み込まれ、ページを引き起こさずにアプリケーションに提供された縦横のスペースを埋めるためのHTMLアプリケーションを構築していますレベルのスクロールバー。これを行うために、私はflexboxスタイルを大量に使用しましたが、IE/EDGEとFFの最新バージョン（Chromeは期待どおりに動作します）で動作する以下の要件に対する解決策を見つけることができません。

要件：

• 2列のレイアウト
• LHS列は、利用可能な空間の100％高く、その内容は、次に長いカラムの高さである場合の垂直スクロールバーを有しています。
• RHS列
• LHS & RHS列が「位置：絶対的な」ことはできません（私は現在、これをacheivedている）100％高く、利用可能なスペースの100％幅フレックスと絶対とコンテナ内部HighChartsをレンダリングスタイル（FFパフォーマンスの問題を位置決め）または明示的なピクセルの高さ/幅（応答する必要があります）。

LHSコンテンツのため、FF/IE/EDGE - ページレベルスクロールバーに存在する問題を示すこのフィドルをセットアップしました。 Chromeは必要に応じて動作します。

http://jsfiddle.net/jzo56zzg/

HTML

<div class="wrap"> 
    <div> 
     SOME 3RD PARTY ELEMENTS HERE 
    </div> 
    <div class="main"> 
     <div class="row"> 
      <div class="left"> 
       <p>lots of content</p> 
       <p>lots of content</p> 
       // enough content to be higher then app's allowed height 
      </div> 
      <div class="right"> 
       right 
      </div> 
     </div> 
    </div> 
</div> 

CSS

html, 
body { 
    height: 100%; 
} 

.wrap { 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    background: red; 
} 

.main { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background: yellow; 
} 

.row { 
    flex: 1; 
    display: flex; 
    background: blue; 
} 

.left { 
    overflow-y: scroll; 
    background: green; 
} 

.right { 
    flex: 1; 
    background: pink; 
} 

私が言及した厳格な要件で、この比較的シンプルなデザイン（1が思うだろう）を達成することができますどのように誰もが知っていますか？

Answer 1

は、ここで私はあなたがしたいと思う結果を示すフィドルです：

https://jsfiddle.net/jameslafferty/wjsqmsbs/

トラブルは高さが計算されている方法はsquirrellyビットを得ることができるということです。私の解決策の重要な要素は次のとおりです。

.row:last-child { 
    flex: 0 1 auto; 
    overflow: hidden; 
} 

と

.column { 
    overflow-y: auto; 
    max-height: 100%; 
}