title: Flex layout in IE11 not working
body: <p>For some reason, this looks horrendous in IE11.
  It won't take the proper width of the sidebar divs.
  It works great in Chrome and Firefox, so I'm not sure what I could add to this to keep it looking/functioning the same across all browsers.</p>
  
  <p>Also, I am only using classes and no ID's due to multiple instances on the same page. It's a multiple tab layout. So I target everything with the class name of the tab, then the class name of the element.</p>
  
  <p>Any thoughts?</p>
  
  <p>Also, thanks to @G-Cyr for the link to this: <a href="https://codepen.io/anon/pen/oqBrgE" rel="nofollow noreferrer">https://codepen.io/anon/pen/oqBrgE</a></p>
  
  <p>Here is the jsfiddle link <a href="https://jsfiddle.net/vLpms54f/3/" rel="nofollow noreferrer">https://jsfiddle.net/vLpms54f/3/</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-js lang-js prettyprint-override"><code>$(function(){
   slideBars();
  });
  function slideBars(){
   var labels = $(".bar_container label");
   labels.on('click', function(){
    var checkBox = $("." + $(this).data("checkbox"));
    checkBox.prop("checked", !checkBox.prop("checked"));
   });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body,
  .order_tools_container {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  .order_tools_container{
   display: flex;
   width: 100%;
   height: 100%;
   margin: 0;
   overflow: hidden;
  }
  .bar_container{
   display: flex;
  }
  .bar_main{
   flex: 1;
  }
  .leftbar_container .bar_main, .rightbar_container .bar_main{
   width: 250px;
   background-color: #00162C;
   transition: 0.5s;
  }
  .search_container{
   height: 50px;
   margin: 0;
   transition: 0.5s;
  }
  .leftbar_container label{
   order: 1;
  }
  .bar_container label{
   cursor: pointer;
   padding: 2.5px;
   background-color: #666;
   display: flex;
   align-items: center;
   justify-content: center;
  }
  .bar_container label:hover{
   background-color: lightgray;
  }
  .middle_sec{
   flex-flow: column;
   flex: 1;
  }
  .search_container, .bar_main{
   display: flex;
   flex-flow: column;
   align-items: center;
   justify-content: center;
   min-height: 20px;
  }
  .slider_check{
   display: none;
  }
  .leftbar_input:checked ~ .leftbar_container .bar_main{
   margin-left: -250px;
  }
  .middlebar_input:checked ~ .middle_sec .search_container{
   margin-top: -50px;
  }
  .rightbar_input:checked ~ .rightbar_container .bar_main{
   margin-right: -250px;
  }
  .leftbar_input:checked ~ .leftbar_container label,
  .middlebar_input:checked ~ .middle_sec label,
  .rightbar_input:checked ~ .rightbar_container label{
   transform: scale(-1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="order_tools_container"&gt;
   &lt;input class="slider_check leftbar_input" type="checkbox"&gt;
   &lt;input class="slider_check middlebar_input" type="checkbox"&gt;
   &lt;input class="slider_check rightbar_input" type="checkbox"&gt;
   &lt;script src="https://use.fontawesome.com/b26dc7d2ea.js"&gt;&lt;/script&gt;
    &lt;link href="https://use.fontawesome.com/b26dc7d2ea.css" media="all" rel="stylesheet"&gt;
    &lt;div class="bar_container leftbar_container"&gt;
    &lt;label data-checkbox="leftbar_input"&gt;
     &lt;i class="fa fa-chevron-left" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/label&gt;
    &lt;div class="bar_main"&gt;test
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="bar_container middle_sec"&gt;
    &lt;p class="search_container"&gt;
     &lt;input type="search" class="order_search" name="order_search" spellcheck="false"&gt;
    &lt;/p&gt;
    &lt;label data-checkbox="middlebar_input"&gt;
     &lt;i class="fa fa-chevron-up" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/label&gt;
    &lt;div class="bar_main box_container"&gt;test
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="bar_container rightbar_container"&gt;
    &lt;label data-checkbox="rightbar_input"&gt;
     &lt;i class="fa fa-chevron-right" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;/label&gt;
    &lt;div class="bar_main"&gt;test
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>