title: Line not breaking in IE (flexbox)
body: <p>I used the following technique to vertically center the text in a DIV:</p>
  
  <pre><code>.nav-wrap&gt;ul&gt;li&gt;a div{
      height: 100%;
      display: flex;
      justify-content: center;
      align-content:center;
  }
  </code></pre>
  
  <p>It's for the nav menu, one item looks like this (it's inside the LI item in UL):</p>
  
  <pre><code>&lt;a href="#" data-dropdown="training"&gt;&lt;div&gt;Online Training/Resources&lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p>However, vertical alignment works fine in , but I have the problem in IE11 (and probably older ones). In Chrome and Firefox, if the text line is longer than the width of the container, it breaks into two lines, and stays aligned, just like it should. But in IE, it doesn't break, it expands out of the div, and overlaps with the other nav items. Why is this happening?</p>