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

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

我看到这个问题已经有一个公认的答案，但该解决方案对我不起作用。 其他事情做了所以我想我会分享给将来遇到这种情况的任何人。

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

要获得更复杂的跨浏览器工作的 flex-box 布局（通过工作，我的意思是 flex children 滚动以获取溢出的内容），请执行以下操作：

1. 给最外面的容器一个预定义的高度
2. 将 Flexbox 用于包装可滚动容器的所有容器
3. 由于内容默认垂直放置在页面上，建议使用： flex-direction: column
4. 对于 Firefox：明确设置min-height: 0为每个 flex-item 父级一直到最外层的 flex-box。
5. 如果您有多个 flex 子级并且将滚动的子级需要扩展以填充所有可用空间，请使用flex-grow: 1

我从Stephen Bunch的一篇文章中得到了这个，我认为它最初也发布在 SO 上的某个地方。 为他点赞！

尽管如此，您的滚动 flex 子容器将无法在 IE11 中工作。 它将扩展到包含内容的整个高度。

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

• 添加overflow: hidden; 给所有的父母

感谢另一个相关问题中 SO 上的原始海报geon 。

此外，在研究修复我自己的 flex 布局问题时，拥有 flex 布局的图表比巨大的代码墙更有帮助。 谢谢欧！

希望有帮助。 它确实对我有用。 对于这个更复杂的布局，我所有的 flex-box 问题。

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

Answer 2

不确定这是否是最好的方法，但我将其简化为一个简单的引导行，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;
  }

查看更新的代码笔： http ://codepen.io/smlombardi/pen/WwLgyV?editors=1100

Answer 3

这里没有一个答案对我有用。

我使用 IE 的经验是，很多时候都需要显式设置继承和属性，这里也是如此。 在我的情况下，解决方法是将容器元素的最大高度设置为 90vh，并将溢出-y 设置为隐藏。 子元素（滚动元素）设置为继承max-height，overflow-y 设置为 auto。 简单地将其设置为 100% 不起作用，实际上关键字是“继承”

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