title: Flexbox min-width broken in IE 11
body: <p>I use the library <a href="https://github.com/fkhadra/react-toastify" rel="nofollow noreferrer">react-toastify</a> to show toasts in my application. By default the toast has <code>width: 320px</code>. Since this is sometimes not enough space for a word and part of that word is not displayed, I tried to resize the toast by using this css:</p>
  
  <pre><code>div.toast-resize {
    width: auto;
    max-width: 500px;
  }
  </code></pre>
  
  <p>This works in Chrome, but unfortunately not in IE 11. In IE the toasts have always the <code>min-width</code>. I think the reason is the use of flexbox by toastify. Unfortunately neither <a href="https://stackoverflow.com/questions/38665332/flexbox-width-broken-in-ie">this</a> nor <a href="https://stackoverflow.com/questions/29562755/flexbox-ie10-width-issues">this</a> workaround worked. I created the following example. The <code>.Toastify*</code>-Rules can't be changed, <code>div.toast-resize</code> is my own rule.</p>
  
  <p>How can I make this look equal in IE and Chrome?</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-css lang-css prettyprint-override"><code>.Toastify__toast-container {
    position: fixed;
    width: 320px;
  }
  .Toastify__toast {
    margin-bottom: 1rem;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
  }
  .Toastify__toast--success {
    background: #07bc0c;
  }
  .Toastify__toast-body {
    flex: 1 1;
  }
  
  div.toast-resize {
    width: auto;
    max-width: 500px;
    min-width: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;body&gt;
      &lt;div class="Toastify"&gt;
        &lt;div class="Toastify__toast-container Toastify__toast-container--top-right toast-resize"&gt;
          &lt;div class="Toastify__toast Toastify__toast--success"&gt;
            &lt;div class="Toastify__toast-body" role="alert"
              &gt;Very long text with loooooooooooooooooooooooooooooooooooooooooooong word&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="Toastify__toast Toastify__toast--success"&gt;
            &lt;div class="Toastify__toast-body" role="alert"&gt;Short text&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>