html - FF/IE/EDGE行中100％高的列上的CSS flexbox垂直滚动条

我正在构建一个加载到第三方应用程序中的html应用程序，该应用程序旨在填充提供给我的应用程序的垂直和水平空间，而不会引起页面级滚动条。为此，我大量使用了flexbox样式，但是我找不到适用于最新版本IE / EDGE和FF的以下要求的解决方案（Chrome可以正常工作）。

要求：


2列布局
LHS列的可用空间高100％，并且具有一个垂直滚动条，用于当其内容长于列的高度时使用。
RHS列的可用空间为100％高，宽度为100％（我目前已实现此目的）
LHS和RHS列不能具有“ position：absolute”样式（FF性能问题，无法在具有挠性和绝对位置的容器内渲染HighCharts）或显式的像素高度/宽度（需要响应）。


我已经设置了这个小提琴，以演示FF / IE / EDGE中存在的问题-由于LHS内容而导致的页面级滚动条。 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;
}

有谁知道我能通过提到的严格要求来实现这种相对简单的设计（有人会认为）？

最佳答案

这是显示我认为您想要的结果的小提琴：

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

问题在于计算高度的方法可能会有些松散。我的解决方案中的关键要素是：

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

和

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

关于html - FF/IE/EDGE行中100％高的列上的CSS flexbox垂直滚动条，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38989188/