IE11 / Edge中的可滚动Flex-box子问题[重复]

Question

我在尝试使用 Flex-grow 而不是设置高度来设置 Flex-box 父级可滚动的子级时在 IE11/Edge 中遇到问题。因为在项目中我无法使用高度这种类型的东西，因为它需要是动态的。

看看下面的sn-p..你们有过这样的问题吗？

试试谷歌浏览器，然后用 IE11/Edge 看看有什么不同

main {
  max-width: 100px;
  max-height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
main section {
  -ms-flex-preferred-size: 50px;
      flex-basis: 50px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: red;
}
main div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background-color: grey;
}
main div article {
  overflow-y: auto;
}

<main>
  <section>head</section>
  <div>
    <article>
       fewa fwae awf wa wafwafewa fwae awf wa wafwafewa fwae awf wa wafwafewa fwae awf wa wafwafewa fwae awf wa wafwafewa fwae awf wa wafwafewa fwae awf wa wafwafewa fwae awf wa wafwafewa fwae awf wa wafwafewa fwae awf wa wafwafewa fwae awf wa wafwa
    </article>
  </div>
</main>

Answer 1

IE 中有一个已知错误，它会混淆 flex 项的高度。基本上，flex-item 无法访问父级的高度来知道自己的高度。奇怪的是，它可以访问祖父母的身高。它与this commonly used list 上的 flex-bug #3 基本相同，尽管您的具体情况略有不同。

在我看来，最简单的解决方法是添加：

display:flex;
flex-direction:column;

到一个包裹在你的 flex-container 周围的 div（在你的情况下，围绕

元素）。