title: Flex-Basis: 0% causes incorrect overflow in IE11
body: <p>The problem I have involves <code>flex-basis: 0%;</code> and how IE11 handles it when the user reduces the window's width. Could be related to the bug with <a href="https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box" rel="noreferrer">box-sizing</a>.</p>
  
  <p>I have a variable number of flex-children, and each child is of unknown width. Each child has arbitrary dynamically-generated content. However, some of this content must have the ability to wrap text.</p>
  
  <p>The flex-container itself must have 100% width and must be able to wrap its children (i.e., <code>flex-wrap: wrap</code>).</p>
  
  <p>Let's assume three flex-children are present, with the last one requiring text-wrapping:</p>
  
  <pre><code>&lt;div class="flex-container"&gt;
    &lt;div class="flex-child"&gt;
      &lt;div&gt;This text should not overlay other flex-children.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-child"&gt;
      &lt;div&gt;This text should not overlay other flex-children.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-child"&gt;
      &lt;div class="text-break"&gt;This text should break on new lines when the container shrinks down&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS can be defined as follows:</p>
  
  <pre><code>.flex-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .flex-child {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0%;
    white-space: nowrap;
    padding: 5px;
  }
  
  .text-break {
    white-space: pre-wrap;
  }
  </code></pre>
  
  <p>When the window is wide enough, each flex-child should be side-by-side, and the text not collapsed:
  <a href="https://i.stack.imgur.com/8BLbl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8BLbl.png" alt="Correct display - Max-width Window"></a></p>
  
  <p>When the window is shrunken horizontally, the text in the right-most box should begin to break to new lines:
  <a href="https://i.stack.imgur.com/HV89d.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HV89d.png" alt="Correct Display - Mid-width Window"></a></p>
  
  <p>And when the text can no longer break into more lines, the flex-boxes themselves should begin to break lines:
  <a href="https://i.stack.imgur.com/KeJj6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KeJj6.png" alt="Correct Display - Min-width Window"></a></p>
  
  <p>This works great in most modern browsers but not our friend, IE11. In IE11, when changing the screen size, the text wraps fine, but the flex-children do not wrap at all. Because the flex-children do not wrap, their content overflows into one another:
  <a href="https://i.stack.imgur.com/LaaHn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LaaHn.png" alt="Incorrect IE11 Display - flex-basis: 0%"></a></p>
  
  <p>Changing the flex basis to <code>flex-basis: auto;</code> has the opposite effect: the text will not wrap but the flex-children do, but no content overflows (in this screenshot, the text in the green box should be breaking lines rather than the flex-box breaking into a new line):
  <a href="https://i.stack.imgur.com/n6atr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/n6atr.png" alt="Incorrect IE11 Display - flex-basis: auto"></a></p>
  
  <p>Most solutions I have seen require having fixed-length flex-children which I cannot afford to have here because they are dynamically generated. I intentionally did not use the <code>flex</code> shortcut property because of some other non-related issues with it. <a href="https://stackoverflow.com/a/46408807/2848494">This answer</a> recommends using <code>_:-ms-fullscreen, :root .IE11-only-class { /* IE11 specific properties */ }</code> which might work if I could get around the text-wrapping issue, but I cannot figure that out.</p>
  
  <p>I should also say that I only need this to work on the latest browsers (technically only on certain versions of Chrome and IE11, but having other browsers and versions work as well is a plus).</p>
  
  <p>Here is a <a href="https://codepen.io/anon/pen/OOLgEP" rel="noreferrer">code pen</a> showing the problem in full (view in IE11 and Chrome to see the difference).</p>
  
  <p>Does anyone have any ideas as to how to get around this issue?</p>
  
  <p>Remember, the requirements are:</p>
  
  <ul>
  <li>unknown number of flex-children of unspecified width</li>
  <li>certain text must wrap before the flex-boxes wrap</li>
  <li>flex-children must wrap once the text can no longer wrap more</li>
  <li>Chrome (I am using 59.0.3071.109) and IE11 (I am using 11.0.9600.18816CO) should behave in the same way.</li>
  <li>CSS-only solutions are preferred</li>
  </ul>
  
  <p>Thank you.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>A coworker of mine recommended using a separate class for flex-children that do not contain wrappable text. The following HTML and CSS were what he used:</p>
  
  <pre><code>&lt;!--HTML--&gt;
  &lt;div class="flex-container"&gt;
    &lt;div class="flex-child child-1"&gt;
      &lt;div&gt;This text should not overlay other flex-children.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-child flex-child-without-textwrap child-2"&gt;
      &lt;div&gt;This text should not overlay other flex-children.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="flex-child flex-child-with-textwrap child-3"&gt;
      &lt;div class="text-break"&gt;This text should break on new lines when the container shrinks down&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And</p>
  
  <pre><code>/*CSS*/
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .flex-child {
    flex-grow: 1;
    flex-shrink: 1;
    padding: 5px;
    white-space: nowrap;
  }
  
  .flex-child-without-textwrap {
    flex-basis: auto;
  }
  
  .flex-child-with-textwrap {
    min-width: 200px;
    flex-basis: 0%;
  }
  
  .text-break {
    white-space: pre-wrap;
  }
  </code></pre>
  
  <p>His solution technically fixed the problem as I presented it here, but I forgot to mention another requirement:</p>
  
  <ul>
  <li>Within a flex-child, there can be any combination of wrappable text and unwrappable text</li>
  </ul>
  
  <p>His solution does not succeed when changing the third flex-child to:</p>
  
  <pre><code>&lt;div class="flex-child flex-child-with-textwrap child-3"&gt;
    &lt;div class="text-break"&gt;This text should break on new lines when the container shrinks down&lt;/div&gt;
    &lt;div&gt;This text should not break on new lines&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this case, the text in the second div in the third flex-child flows out of its container, and the text begins wrapping too early.</p>
  
  <p>A codepen showing this almost-working solution can be seen <a href="https://codepen.io/anon/pen/gXObjL" rel="noreferrer">here</a> (note that <code>min-width</code> was removed because it caused further issues on Chrome).</p>
  
  <p><strong>Update 2:</strong>
  I don't think I was clear enough earlier: any, all, or none of the flex-children may have wrappable text. It all depends on the dynamically-generated content. In the example I gave, only the third flex-child has wrappable text, but that might not always be the case.</p>