행의 100 % 높이 열의 CSS flexbox 수직 스크롤 바

Question

제 3 자 앱에로드되는 html 앱을 만들고 있는데, 페이지를 만들지 않고 앱에 제공되는 가로 및 세로 공간을 채우는 데 사용됩니다 레벨 스크롤바. 이렇게하려면 flexbox 스타일을 많이 사용했지만 IE/EDGE 및 FF (Chrome은 예상대로 작동 함)의 최신 버전에서 작동하는 다음 요구 사항에 대한 솔루션을 찾을 수 없습니다.

요구 사항 :

• 2 열 레이아웃
• LHS 열은 사용 가능한 공간의 100 % 높고, 그 내용은 다음 이상 열이 높이 일 때의 세로 스크롤 막대가 있습니다.
• RHS 열은 사용 가능한 공간의 100 % 높은 100 % 폭 (나는 acheived 한이 현재)
• & 우 열이 가질 수 없습니다 LHS "위치 : 절대"스타일 (FF 성능 문제가 플렉스와 절대와 용기 내부 HighCharts 렌더링 위치 지정) 또는 명시 적 픽셀 높이/너비 (응답해야 함).

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; 
} 

사람이 내가 언급 엄격한 요구 사항이 비교적 간단한 디자인 (하나가 생각하는 것)을 달성 할 수있는 방법을 알고 있나요?

Answer 1

는 여기에 내가 원하는 생각하는 결과를 나타내는 바이올린입니다 :

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

의 문제점은 높이가 계산되는 방법 squirrelly 비트를 얻을 수 있다는 것입니다. 내 솔루션의 핵심 요소는 다음과 같습니다

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

및

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