IE11中的Flex布局无法正常工作

Question

出于某种原因，这在IE11中看起来很可怕。 它不会采用侧边栏的适当宽度。 它在Chrome和Firefox中运行良好，所以我不确定我可以添加什么来保持它在所有浏览器中的外观/功能相同。

此外，由于同一页面上有多个实例，我只使用类而不使用ID。这是一个多标签布局。所以我用tab的类名来定位所有东西，然后是元素的类名。

有什么想法吗？

另外，感谢@ G-Cyr提供的链接：https://codepen.io/anon/pen/oqBrgE

这是jsfiddle链接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>