Flexbox not displaying properly in IE or Chrome - html

Question

OK, so I didn't want to use flexboxes to begin with because of the older browser support issues but the only way I could get it working without flexbox involved floats, -margins, z-indexs, and was just very ugly and unseenly.
That being said, with flexbox, the left hand date block contorts both its width and height in both IE and Chrome despite hard setting the height and width.
https://jsfiddle.net/yuum08d9/
<style>
body {
font: 13px / 23px Roboto, sans-serif;
}
#Experience {
}
#Experience h4 {
color: #262626;
font: normal normal 300 normal 23px / 29.12px Roboto, sans-serif;
margin: 0px 0px 30px;
}
#Experience .Experience {
box-sizing: border-box;
color: #404040;
display: flex;
margin: 0 0 30px 0;
padding: 20px 0 0 0;
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience:Hover {
transform: translateX(20px);
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-o-transform: translateY(-20px);
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience .Date {
height: 160px;
width: 172px;
position: relative;
display: block;
}
#Experience .Experience .Date div {
bottom: -1.5px;
transform: matrix(1, 0, 0, 1, 20, -20);
background: #f1f1f1;
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience:Hover .Date Div {
background: #4dbfd9;
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.05);
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience .Date h6 {
color: #262626;
letter-spacing: 0.8px;
font: normal normal bold normal 15px / 24.44px Roboto, sans-serif;
margin: 0px;
padding: 56.75px 0px;
text-align: center;
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience:Hover .Date h6 {
color: #fff;
transition: all 400ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience .Date .Angle {
position: absolute;
right: 0;
top: 142px;
transform: matrix(1, 0, 0, 1, 20, 0);
border-top: 20px solid #DAD6D6;
border-right: 20px solid #fff;
border-bottom: 0px solid #fff;
border-left: 0px solid #fff;
}
#Experience .Experience .WorkExperience {
box-shadow: rgb(221, 221, 221) 0.5px 0.5px 5px 0px;
box-sizing: border-box;
color: #404040;
font: 13px / 23px Roboto, sans-serif;
padding: 20px 55px;
text-align: left;
}
#Experience .Experience .WorkExperience h6 span {
font-size: 14px;
padding: 2px 0 0 10px;
}
#Experience .Experience .WorkExperience h6 {
color: rgb(38, 38, 38);
font-weight: 900;
font: 17px / 26px Roboto, sans-serif;
margin: 9px 0 0 0;
}
#Experience .Experience .WorkExperience p {
font: 13px / 23px Roboto, sans-serif;
}
#Experience .Experience .WorkExperience ul {
list-style:disc;
}
</style>
<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>
<!-- divider -->
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">August 2013 -<br />January 2015</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Information System Security Officer/Information System Security Engineer<span>U.S. Air Force</span></h6>
<p>System administrator/manager responsible for ensuring confidentiality, integrity, and availability of systems and networks and data through the utilization of risk analysis process. Responsibilities include obtaining/maintaining Information System accreditation (SSPS/ISSP), integrate disaster recovery/contingency planning, establish a security education, training, and awareness program, create configuration management (CM) process and conduct auditing & network monitoring.</p>
<ul>
<li>Collaborated with HQ to develop 15 new policies and update 28 procedures to include: contingency planning, user training, configuration management, and auditing, in accordance with JSIG/JAFAN PL-2 requirements; skilled at complex information systems, i.e. Multi-Program Interconnection, PL-2 systems, and above, development of IA Policies and Procedures, and preparation of C&A documents and procedures; lauded by PACAF inspectors as "most improved".</li>
<li>Coordinated massive network overhaul replacing/upgrading ~90% of network infrastructure in order to comply with PL-2 IS requirements achieving approximately 99.8% system uptime. (Up from 88%)</li>
<li>Developed and implemented custom scripts throughout entire IS enabling highly customized real-time auditing/reporting of all information systems (ISs) improving ISSM/ISSO awareness while meeting JSIG/JAFAN auditing requirements. </li>
</ul>
</div>
</div>
<!-- divider -->
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">June 2013 -<br />August 2013</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Communications Focal Point Technician<span>U.S. Air Force</span></h6>
<p>System administrator/manager responsible for ensuring confidentiality, integrity, and availability of systems and networks and data through the utilization of risk analysis process. Responsibilities include obtaining/maintaining Information System accreditation (SSPS/ISSP), integrate disaster recovery/contingency planning, establish a security education, training, and awareness program, create configuration management (CM) process and conduct auditing & network monitoring.</p>
<ul>
<li>Accountable for maintaining physical accountability of AFIN equipment, planning, and scheduling production, ordering, and management of materials, and track/order preventive maintenance.</li>
<li>Conducted Tier I/II help desk support; directly involved in the resolution of 500+ tickets.</li>
<li>Effectively provided technical support, in person, on phone and through online communication cutting ticket creation by approximately 12% in less than 3 months.</li>
<li>Successfully developed and implemented new ticket monitoring and reporting system cutting reporting time by nearly 80%.</li>
<li>Improved network vulnerability awareness by approximately 30% by effectively developing and implementing vulnerability and patching monitoring system.</li>
</ul>
</div>
</div>
<!-- divider -->
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">June 2013 -<br />August 2013</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Network Control Center Technician<span>U.S. Air Force</span></h6>
<p>System administrator of $318 million network for 35th Fighter Wing supporting 44 units throughout Japan. Responsibilities include managing core network services including Active Directory, Group Policy, DNS, and DHCP. Other responsibilities included system lifecycle management, vulnerability identification/remediation, and tier 3 support.</p>
<ul>
<li>Team leader for windows domain migration project, to incorporate local base network into Air Force Intra-Network (AFIN) -- lauded "Best to Date" migration by Higher Headquarters Communications and Information Director.</li>
<li>Developed the vulnerability management & mitigation rapid resolution program resulting in the identification and resolution of over 25,000 vulnerabilities in less than 2 weeks.</li>
<li>Developed Batch/PowerShell script suite used to identify/correct operating system errors, perform customized system maintenance, remediate patching shortfalls, and detect OS vulnerabilities resulting in 25% drop in tier 1 tickets and 22% improvement in patching, and improved system life cycle.</li>
</ul>
</div>
</div>
<!-- divider -->
</div>

Answer 1

For the Date item to keep its width and not shrink to fit (which is the default), you need to set flex-shrink: 0
#Experience .Experience .Date {
flex-shrink: 0; /* added */
height: 160px;
width: 172px;
position: relative;
display: block;
}
Updated fiddle

Answer 2

I had faced a similar problem with flex which also included an issue with absolutely positioned child divs inside flex containers in Firefox. Thus I would advice against using flex because of the reason you stated as well cross browser compatibility.
So I dropped flex and used the metrics vw, vh and vmin( vm for IE ) instead. These units are tied in with the viewport and allow for fluidic layouts with elegant code. You can even use these units with fonts for a more responsive design.
Here's a JSFiddle demonstrating this. It runs in all browsers and is responsive as well.
And here's the code
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;
}
<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>