title: How can I resolve an issue with a website (using flex-box and max-width) re-sizing inappropriately on IE 11?
body: <p>I'm having a problem with a site redesign on IE 11 - the portfolio section slowly shrinks, aligns left, and eventually disappears when the window is less than 768px wide, and when clicking on a portfolio item, the content enlarges way beyond the viewport. There is no such issue with Chrome or Firefox.</p>
  
  <p>This is the first time I have used flexbox, so I'm guessing that is the problem.</p>
  
  <p>The site:
  <a href="http://test.nicklemmon.com" rel="nofollow">test.nicklemmon.com</a></p>
  
  <p>Thanks!
  I was able to resolve the issue where the content disappears entirely - it had something to do with usingn max-width on a div (though this didn't effect the other browsers)</p>
  
  <p>Isolating where I think the left-aligning problem lies...I'm using SASS + Bourbon:</p>
  
  <pre><code>        .work-container .row {
            display: -webkit-box;
            display: -moz-box;
            display: box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -moz-box-orient: horizontal;
            box-orient: horizontal;
            -webkit-flex-direction: row;
            -moz-flex-direction: row;
            flex-direction: row;
            -ms-flex-direction: row;
            -webkit-box-align: center;
            -moz-box-align: center;
            box-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;
            -ms-flex-align: center;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            box-pack: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            -o-justify-content: center;
            justify-content: center;
            -ms-flex-pack: center;
            max-width: 100%;
            margin: 0 auto;
          }
  @media (max-width: 768px) { 
      .work-container .row {
          display: -webkit-box;
          display: -moz-box;
          display: box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -moz-box-orient: horizontal;
          box-orient: horizontal;
          -webkit-flex-direction: row;
          -moz-flex-direction: row;
          flex-direction: row;
          -ms-flex-direction: row;
          -webkit-box-pack: center;
          -moz-box-pack: center;
          box-pack: center;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          -ms-justify-content: center;
          -o-justify-content: center;
          justify-content: center;
          -ms-flex-pack: center;
          -webkit-box-align: center;
          -moz-box-align: center;
          box-align: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          -ms-align-items: center;
          -o-align-items: center;
          align-items: center;
          -ms-flex-align: center;
          -webkit-box-lines: multiple;
          -moz-box-lines: multiple;
          box-lines: multiple;
          -webkit-flex-wrap: wrap;
          -moz-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          max-width: 100% !important;
        }
  }
  </code></pre>
  
  <p>I'm also temporarly allowing overflow to see if anyone else can see where the issue lies. Looking at the code again, some of this is redundant.</p>
  
  <p>OK, looking at it again I see where the problem lies, but I'm still not sure how to resolve it:</p>
  
  <pre><code>.work-belt {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    width: 200%;
  }
  </code></pre>
  
  <p>If I take out display: flex, then the shrinking/left-aligning behavior goes away, but then the layout breaks on Chrome and Firefox.</p>
  
  <p>Anyone have any thoughts?</p>