Flexbox not displaying properly in IE or Chrome

Stackoverflow solution

by Atif Hassan

HTML

<div id="Experience" class="Block">
	<h4>
		Work Experience
	</h4>
	<div class="Experience">
		<div class="Date">
			<div>
				<h6 class="H6">January 2015 -<br />Present</h6>
			</div>
			<span class="Angle"></span>
		</div>
		<div class="WorkExperience">
			<h6>Boundary Protection Engineering <span>U.S. Air Force</span></h6>
			<p>System Administrator of $10 billion United States Air Force Intra-Network (AFIN) Boundary Protection Cyberspace Security and Control System Weapon System (CSCS/WS) responsible for 1,070 firewalls, proxies, and VPN’s across 121 geographically separated locations in order to evaluate, detect, prevent and implement countermeasures to protect clients, networks, and data & voice systems to include Secure Internet Protocol Routing (SIPR) network mission systems from unauthorized network activity.</p>
			<ul>
				<li>Directed 624th Operations Command (OC) U.S. Cyber Command (USCYBERCOM) mission mapping 83rd Network Operations Squadron (NOS) key weapon systems paving future for Defensive Cyber Operations (DCO) missions.</li>
				<li>Bolstered data mining capabilities by 55% by meticulously developing new Electronically Stored Information (ESI) requests logging/search process.</li>
				<li>Promptly identified and resolved critical Air Force Security Assistance Center (AFSAC) service outage identifying and resolving 8 firewall security tunnel circuits enabling $166B global peacekeeping operations.</li>
			</ul>
		</div>
	</div>

CSS

body {
		font: 13px / 23px Roboto, sans-serif;
	}
	#Experience {

	}

	#Experience h4 {
		color: #262626;
		font: normal normal 300 normal 23px / 29.12px Roboto, sans-serif;
	}
  
  .H6{
    text-align: center;
    display: inline-block;
    border: 2px solid #404040;
    width: 20vw;
    float: left;
    background-color: #f1f1f1;
    margin: 2vw;
  }
  
  .WorkExperience{
    border: 2px solid #404040;
    width: 50vw;
    margin-left: 18vw;
    padding: 2vw;
  }