IE 11 Flexbox child is overflowing container

Question

I have put together the following example. It works on all major browsers but it does not on IE11. The content div is overflowing the flex container (no scroll bar) and pushes the footer down. Any suggestions?

html,
body {
  padding: 0;
  margin: 0;
}

.c1 {
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
  max-width: 500px;
  max-height: 100px;
}

.h,
.f {
  flex: 0 0 auto;
}

.b {
  border: 1px solid red;
  flex: 1 1 auto;
  overflow: auto;
}

<div class="c1">
  <header class="h">header</header>
  <div class="b">What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  </div>
  <footer class="f">footer</footer>
</div>

IE11 has a known bug when using `max-*` and `min-*` properties on flex containers. Essentially, flex containers ignore them. The solution is to make the container into a flex item, as well. Add `display: flex` to the parent. You also need to add `width: 100%` to the child to handle another bug. https://jsfiddle.net/jq5eym8x/ — Michael Benjamin, Nov 20 '19 at 18:00

score 0 · Answer 1 · answered Nov 20 '19 at 08:33

0

Try to replace the max-height property in c1 class with the height will help to fix the issue.

.c1 {
      border: 1px solid blue;
      display: flex;
      flex-direction: column;
      max-width: 500px;
      height: 100px;
    }

Output in IE 11:

answered Nov 20 '19 at 08:33

Deepak-MSFT

10,379
1
12
19

Thanks, however I do need max-height for the design. – Jose Ch. Nov 20 '19 at 08:37
IE browser has some issue while using min or max height/ width with flex. It is not able to calculate the values properly. If possible for you then you can try to apply this style only for IE browser. so it will not effect the results on other browsers. – Deepak-MSFT Nov 20 '19 at 08:39
how would you suggest doing that? – Jose Ch. Nov 20 '19 at 09:07
Do you mean how you apply the specific style for IE? If yes, then you can try to use JS code to identify the browser and try to apply the CSS class. Let me know, if I misunderstood anything. I will try to correct myself. Thanks for your understanding. – Deepak-MSFT Nov 20 '19 at 09:13

IE 11 Flexbox child is overflowing container

1 Answers1