title: Text doesn't wrap in IE 11 flex layout
body: <p>On IE 11 some of the text of a section is getting mangled. </p>
  
  <p><a href="https://i.stack.imgur.com/PtVQ8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PtVQ8.png" alt="Mangled text"></a></p>
  
  <p>It should look like this and does on every other browser I've tried (Chrome, Firefox, safari, edge etc).</p>
  
  <p>I'm also using a gulp package to compile the scss below which adds all the vendor prefixes to the css needed for compatibility on older browsers.</p>
  
  <p>The HTML is also below. Has anyone else encountered this error before? </p>
  
  <p>Everything I try just hasn't worked. </p>
  
  <p>I know its not a problem with the flex-box since the squares are arranged exactly as they should be.</p>
  
  <p>To me it seems like the width values aren't being interpreted at all but if that's the case I have no idea how to fix it. </p>
  
  <p><a href="https://i.stack.imgur.com/5joDN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5joDN.png" alt="Good text"></a></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>.get-involved {
    padding-top: 30px;
    margin-bottom: 120px;
    text-align: center;
  }
  .get-involved .tag-line-get-involved {
    margin: 0 auto;
    max-width: 570px;
    padding-left: 40px;
    padding-right: 40px;
    text-align: center;
    font-weight: bolder;
  }
  .get-involved .square-container {
    margin-top: 40px;
    margin-left: 40px;
    margin-right: 40px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .get-involved .square-container div {
    margin-top: 40px;
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
  }
  @media all and (max-width: 1079px) {
    .get-involved .square-container div {
      width: 350px;
      padding: 0 30px;
    }
  }
  @media all and (max-width: 900px) {
    .get-involved .square-container div {
      width: 300px;
    }
  }
  .get-involved .square-container div .square {
    margin-bottom: 20px;
    width: 150px;
    height: 150px;
    border: 2px solid white;
    text-align: center;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 14pt;
  }
  .get-involved .square-container div .square p {
    padding-left: 10px;
    padding-right: 10px;
  }
  .get-involved .square-container div .square-orange {
    background-color: #f38331;
  }
  .get-involved .square-container div .square-orange:hover {
    background-color: #e4680d;
  }
  .get-involved .square-container div .square-blue {
    background-color: blue;
  }
  .get-involved .square-container div .square-blue:hover {
    background-color: #0000cc;
  }
  .get-involved .square-container div .square-aqua {
    background-color: #63abb5;
  }
  .get-involved .square-container div .square-aqua:hover {
    background-color: #4a919b;
  }
  .get-involved .square-container div .square-green {
    background-color: #60bf3b;
  }
  .get-involved .square-container div .square-green:hover {
    background-color: #4c982f;
  }
  .get-involved .square-container div .description {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id='get-involved' class='get-involved'&gt;
    &lt;h1 class='header'&gt;Get Involved&lt;/h1&gt;
  
    &lt;p class='tag-line tag-line-get-involved'&gt;
      Become a partner in action!
    &lt;/p&gt;
  
    &lt;div class='square-container'&gt;
  
      &lt;div&gt;
        &lt;button ui-sref='launch' class='square square-orange'&gt;
          &lt;p&gt;Launch a Chapter&lt;/p&gt;
        &lt;/button&gt;
        &lt;p&gt;Start a chapter on your campus!&lt;/p&gt;
        &lt;p class='description'&gt;We provide all the necessary resources and guide you through the process so you can spend less time with the setup and more time effecting change!&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;button ui-sref='become-mentor' class='square square-blue'&gt;
          &lt;p&gt;Become a Mentor&lt;/p&gt;
        &lt;/button&gt;
        &lt;p&gt;Are you a young college alum looking to get involved?&lt;/p&gt;
        &lt;p class='description'&gt;Apply to mentor a team of studentes committed to making change in your community. We make it easy to give back!
        &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;button ui-sref='nominate' class='square square-aqua'&gt;
          &lt;p&gt;Nominate an
            &lt;br&gt;Issue Advisor&lt;/p&gt;
        &lt;/button&gt;
        &lt;p&gt;Do you know a great advisor for the network?&lt;/p&gt;
        &lt;p class='description'&gt;Advisors join our student teams on a bimonthly call to share insight into new developments in their field and answer questions.
        &lt;/p&gt;
      &lt;/div&gt;
  
  
      &lt;div&gt;
        &lt;button ui-sref='support' class='square square-green'&gt;
          &lt;p&gt;Support Kinetic Global&lt;/p&gt;
        &lt;/button&gt;
        &lt;p&gt;Support college students making change in your community!&lt;/p&gt;
        &lt;p class='description'&gt;Kinetic Global is a lean operation, so we offer multiple ways to contribute to the network (financially and in-kind).&lt;/p&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>