IE11/Edge中的可滚动Flex-Box儿童问题

Question

我在尝试设置flex-box parent的孩子可以使用flex-grow而不是设置高度时在IE11/Edge中遇到问题。因为在项目I I中've我无法在此类型的事情上使用高度，因为它需要动态。

看看下面的片段。你们有这样的问题吗？

尝试使用Google Chrome，然后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-Bug＃3基本相同。

我认为，最简单的解决方法是补充：

display:flex;
flex-direction:column;

到包裹在您的flex-container周围的DIV(在您的情况下，Main＆gt; element(。