Question

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

要求：

2列布局
LHS色谱柱的可用空间为100％，并且当其内容长于色谱柱高度时，它具有垂直滚动条。
RHS色谱柱高100％，可用空间宽度100％（我目前已实现这一目标）
LHS＆amp; RHS列不能具有＆＃34; position：absolute＆＃34;样式（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/

麻烦的是，计算高度的方式可能会有点松懈。我的解决方案中的关键要素是：

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

和

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

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

1 个答案: