"inline-flex" item does not grow with its content in Internet Explorer

Question

I have a simple table structure made up of divs:

$(document).ready(function() {
  $("button").on("click", function() {
    $(".cell").outerWidth(500);
  })
})

div {
  border: 1px solid black;
  box-sizing: border-box;
}

.container {
  width: 400px;
  height: 100%;
  padding: 5px;
  overflow: auto;
}

.row {
  min-width: 100%;
  width: auto;
  display: inline-flex;
  padding: 5px;
  margin-bottom: 5px;
  border-color: red;
}

.cell {
  flex: 0 0 auto;
  border-right: 1px solid black;
  overflow: hidden;
  min-width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="cell">x</div>
  </div>
  <div class="row">
    <div class="cell">x</div>
  </div>
  <div class="row">
    <div class="cell">x</div>
  </div>
</div>
<button type="button">Change width</button>

The rows need to be vertically stacked, each having the (unknown) height of their content and be at least as wide as the container. The container has to scroll if the content does not fit. The width of the cells will be interactively changed using JS and the rows should expand to fit the whole content. For this reason, the rows have the following style:

.row {
  min-width: 100%;
  width: auto;
  display: inline-flex;
}

The flex part is needed for the cells and is outside of the scope of this question. Being an inline element, the row will grow with the content in all major browsers but not in Internet Explorer 11. Check out the fiddle and click the button to change the width of the cells. The border helps to visualize the behaviour. The image below shows the expected behaviour (top) and how Internet Explorer interprets it (bottom):

What kind of bug is this (couldn't figure it out from the list of flexbugs) and how can I make it work in Internet Explorer?

Answer 1

In IE11 the behavior is as wanted:

The default flex behavior of flex items has changed. In Internet Explorer 10, flex items that didn't fit their containers overflowed the margins of the container or clipped to the margins of the container. Starting with IE11, these items now shrink to fit their containers (up to the min-width value, if specified). Use the flex-shrink property to change this behavior.

https://msdn.microsoft.com/en-us/library/dn265027(v=vs.85).aspx

So, the following .cell rules should solve the issue

.cell {
  flex: 0 0 auto;
  -ms-flex: 0 1 auto; /* overwrites the previous rule only in IE11 */
  border-right: 1px solid black;
  overflow: hidden;
  min-width: 200px;
}