Flex layout in IE11 not working

Question

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.

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.

Any thoughts?

Also, thanks to @G-Cyr for the link to this: https://codepen.io/anon/pen/oqBrgE

Here is the jsfiddle link https://jsfiddle.net/vLpms54f/3/

$(function(){
 slideBars();
});
function slideBars(){
 var labels = $(".bar_container label");
 labels.on('click', function(){
  var checkBox = $("." + $(this).data("checkbox"));
  checkBox.prop("checked", !checkBox.prop("checked"));
 });
}

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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="order_tools_container">
 <input class="slider_check leftbar_input" type="checkbox">
 <input class="slider_check middlebar_input" type="checkbox">
 <input class="slider_check rightbar_input" type="checkbox">
 <script src="https://use.fontawesome.com/b26dc7d2ea.js"></script>
  <link href="https://use.fontawesome.com/b26dc7d2ea.css" media="all" rel="stylesheet">
  <div class="bar_container leftbar_container">
  <label data-checkbox="leftbar_input">
   <i class="fa fa-chevron-left" aria-hidden="true"></i>
  </label>
  <div class="bar_main">test
  </div>
 </div>
 <div class="bar_container middle_sec">
  <p class="search_container">
   <input type="search" class="order_search" name="order_search" spellcheck="false">
  </p>
  <label data-checkbox="middlebar_input">
   <i class="fa fa-chevron-up" aria-hidden="true"></i>
  </label>
  <div class="bar_main box_container">test
  </div>
 </div>
 <div class="bar_container rightbar_container">
  <label data-checkbox="rightbar_input">
   <i class="fa fa-chevron-right" aria-hidden="true"></i>
  </label>
  <div class="bar_main">test
  </div>
 </div>
</div>