0

I'm having an issue in IE11/Edge when trying to set a child of a Flex-box parent scrollable using Flex-grow instead of setting a height.. since in the project I've got I cannot use heights for this type of thing as it would need to be dynamic.

Have a look at the snippet below.. do you guys ever had an issue like this?

Try it Google Chrome and then IE11/Edge to see the difference

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>
Christian Agius
  • 309
  • 1
  • 4
  • 13

1 Answers1

1

There is a known bug in IE where it gets confused about heights of flex items. Basically, the flex-item can't access the parent's height to know how high to make itself. Oddly, it CAN access the height of a grand-parent. It is essentially the same as flex-bug #3 on this commonly used list, although your specifics are slightly different.

The easiest workaround, in my opinion, is to add:

display:flex;
flex-direction:column;

To a div wrapped around your flex-container (in your case, around the <main> element).

tmdesigned
  • 2,098
  • 2
  • 12
  • 20
  • It wouldn't make a difference since my
    element has display: flex and direction: column already. What made it work for IE11/Edge is to set min-height: 0 to the children. This seems to do the trick.. haven't checked for any issues with other browsers yet tho.
     – Christian Agius Feb 09 '18 at 18:30
  • Well, no offense, but you're wrong that it wouldn't have made a difference. That's what I'm saying, it has to be the grandparent. https://jsfiddle.net/j4h2spd4/1/ – tmdesigned Feb 09 '18 at 19:05
  • Have you tried it on Edge/IE11? As I've just tried your JsFiddle and its the same issue. Instead if you set min-height: 0, it does actually work in Edge/IE11. Here is an example, https://codepen.io/Dirett/pen/oEZxPv – Christian Agius Feb 12 '18 at 07:58