title: "inline-flex" item does not grow with its content in Internet Explorer
body: <p>I have a simple table structure made up of divs:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("button").on("click", function() {
      $(".cell").outerWidth(500);
    })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt;x&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt;x&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="cell"&gt;x&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button type="button"&gt;Change width&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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:</p>
  
  <pre><code>.row {
    min-width: 100%;
    width: auto;
    display: inline-flex;
  }
  </code></pre>
  
  <p>The <code>flex</code> part is needed for the cells and is outside of the scope of this question. Being an <code>inline</code> element, the row will grow with the content in all major browsers but not in Internet Explorer 11. Check out <a href="https://jsfiddle.net/3tpLwz13/1/" rel="nofollow noreferrer">the fiddle</a> 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):</p>
  
  <p><a href="https://i.stack.imgur.com/Okbk8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Okbk8.jpg" alt="Behaviour in different browsers"></a></p>
  
  <p>What kind of bug is this (couldn't figure it out from <a href="https://github.com/philipwalton/flexbugs" rel="nofollow noreferrer">the list of flexbugs</a>) and how can I make it work in Internet Explorer?</p>