Question

我有这个布局。容器div设置为

.container {
  width: 80vw;
  max-height: 75vh;
  margin: auto;}

里面是一个带有标题和正文div的面板div，然后是我的嵌套flexbox。见下图：

主flexbox div设置为row，其中有2个div，即flexbox列。

在那些内部有一个div，每个div都有overflow-y设置滚动，它们都有很多内容。

这在Chrome和Safari中完美运行，但在IE11中滚动的div不会滚动 - 它们会转到内容的整个高度并从容器中溢出。

要清楚：只有那些黄色的div应滚动。

我在这里缺少什么？

更新

我创建了一支精简笔：http://codepen.io/smlombardi/pen/reodZE?editors=1100

Answer 1

不确定这是否是最佳方法，但我将其简化为一个简单的引导行，即2列。

我将容器设置为75vh，将2列设置为相同的75vh。

关键是将2个滚动div设置为flex-basis: something rem：

  .search-results {
    overflow-y: scroll;
    margin-bottom: 10px;
    flex-basis: 10rem;
    background-color: #c4decf;
  }

  .accordions {
    overflow-y: scroll;
    overflow-x: hidden;
    flex-basis: 40rem;
    flex-grow: 1;
    background-color: #f0f0f0;
    padding: 10px;
  }

请参阅更新的codepen：http://codepen.io/smlombardi/pen/WwLgyV?editors=1100

Answer 2

我看到这个问题已经有了一个可以接受的答案，但是该解决方案对我不起作用。我做了一些其他的事情，所以我想以后会遇到的任何人分享。

我的布局与此非常相似。有很多嵌套。使它在Chrome中正常工作非常简单。但是，要使其在Firefox中工作将需要我进行另一天的研究和试验。事后看来，这可能是因为我对flex-box的理解不够。

要使跨浏览器的flex-box布局更复杂（通过工作，我是指flex孩子滚动以查看溢出的内容），请执行以下操作：

使最外面的容器具有预定的高度
对所有包裹可滚动容器的容器使用Flexbox
由于默认情况下内容垂直放置在页面上，因此建议使用：flex-direction: column
对于Firefox：一直到每个最外部的flex-box都为每个flex-item父对象明确设置min-height: 0。
如果您有多个flex子级，并且要滚动的子级需要扩展以填充所有可用空间，请使用flex-grow: 1

我是从article by Stephen Bunch那里得到的，我认为它最初也是在SO上发布的。恭喜他！

不过，您的flex子滚动容器在IE11中将无法使用。它将扩展到所包含内容的整个高度。

要在IE11中修复它，请执行以下操作：

将overflow: hidden;添加到其所有父母

感谢原始海报geon on SO in another related question。

此外，在研究解决我自己的Flex布局问题时，拥有一张Flex布局图比巨大的代码墙更有帮助。谢谢OP！

希望有帮助。当然对我有用。对于这种更复杂的布局，我所有的弹性盒问题。

PS：如果这不能为您解决问题，请考虑一下以下有关flex-box错误及其解决方案/解决方案的列表：https://github.com/philipwalton/flexbugs

Answer 3

这里没有答案对我有用。

我在IE上的经验是，很多时候都需要显式设置继承和属性，这里也是如此。我的解决方法是将容器元素的最大高度设置为90vh，将y溢出设置为隐藏。子元素（滚动元素）设置为 inherit 最大高度，溢出y设置为auto。只是将其设置为100％无效，实际上关键字是“继承”

所有其他父元素都隐藏了溢出

CSS：在IE11上滚动的flexbox中滚动div？

更新

3 个答案: