max-width not working in IE11 with display: table container and display: flex children

Question

In the code below, all is displayed correctly in Chrome. The width of the .inner element is restricted by max-width.

In IE11, the .inner element stretched to all content.

If I set display: block for .container or .inner element all works correctly. But I can't do this because this example is a short reproduction of error in large component that used on many sites and I don't want to break something.

1. Why it happens?
2. How to fix it?

.container {
  background-color: yellow;
  display: table;
  height: 100px;
  max-width: 277px;
}

.inner {
  background-color: red;
  display: flex;
  height: 50px;
}

<div class="container">
  <div class="inner">77 777 777 77 7 7777 77 7 7 7 77 7 7 7 77 7 7 7 7 7 77 7 7 7 7 77 7 77 7 7 77 7 7 77 7 7 77 7 7 77 7 7 7 7 7</div>
  <div class="inner">111 11111 111111111111 111111111111 111111111 111111111111 11111111111 11111111111 11111111 1111111111 11111</div>
</div>

Answer 1

Generally speaking, you can expect problems with flexbox in IE11.

Throw in a <table> element as the parent of flex containers (normally the children of a table are table cells), and you're now looking for trouble.

Finally, add overflowing content, and you're just begging IE11 to break your layout.

That said, the solution to the problem is to add two rules to your code:

 .container {
   width: 100%;              /* new */
   table-layout: fixed;      /* new */
   display: table;
   max-width: 277px;
   height: 100px;
   background-color: yellow;
 }

 .inner {
   background-color: red;
   display: flex;
   height: 50px;
 }

<div class="container">
  <div class="inner">77 777 777 77 7 7777 77 7 7 7 77 7 7 7 77 7 7 7 7 7 77 7 7 7 7 77 7 77 7 7 77 7 7 77 7 7 77 7 7 77 7 7 7 7 7</div>
  <div class="inner">111 11111 111111111111 111111111111 111111111 111111111111 11111111111 11111111111 11111111 1111111111 11111</div>
</div>