html - Flexbox not displaying properly in IE or Chrome -

ok, didn't want use flexboxes begin because of older browser support issues way working without flexbox involved floats, -margins, z-indexs, , ugly , unseenly.

that being said, flexbox, left hand date block contorts both width , height in both ie , chrome despite hard setting height , 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: 600ms ease;             -webkit-transition: 600ms ease;             -moz-transition: 600ms ease;             -o-transition: 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: 600ms ease;             -webkit-transition: 600ms ease;             -moz-transition: 600ms ease;             -o-transition: 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: 600ms ease;             -webkit-transition: 600ms ease;             -moz-transition: 600ms ease;             -o-transition: 600ms ease;     }      #experience .experience:hover .date div {         background: #4dbfd9;         box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.05);         transition: 600ms ease;             -webkit-transition: 600ms ease;             -moz-transition: 600ms ease;             -o-transition: 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: 600ms ease;             -webkit-transition: 600ms ease;             -moz-transition: 600ms ease;             -o-transition: 600ms ease;     }      #experience .experience:hover .date h6 {         color: #fff;         transition: 400ms ease;             -webkit-transition: 600ms ease;             -moz-transition: 600ms ease;             -o-transition: 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 , control system weapon system (cscs/ws) responsible 1,070 firewalls, proxies, , vpn’s across 121 geographically separated locations in order evaluate, detect, prevent , implement countermeasures protect clients, networks, , data & voice systems include secure internet protocol routing (sipr) network mission systems 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 defensive cyber operations (dco) missions.</li>                 <li>bolstered data mining capabilities 55% meticulously developing new electronically stored information (esi) requests logging/search process.</li>                 <li>promptly identified , resolved critical air force security assistance center (afsac) service outage identifying , 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 ensuring confidentiality, integrity, , availability of systems , networks , data through utilization of risk analysis process. responsibilities include obtaining/maintaining information system accreditation (ssps/issp), integrate disaster recovery/contingency planning, establish security education, training, , awareness program, create configuration management (cm) process , conduct auditing & network monitoring.</p>             <ul>                 <li>collaborated hq develop 15 new policies , update 28 procedures include: contingency planning, user training, configuration management, , auditing, in accordance jsig/jafan pl-2 requirements; skilled @ complex information systems, i.e. multi-program interconnection, pl-2 systems, , above, development of ia policies , procedures, , preparation of c&a documents , procedures; lauded pacaf inspectors "most improved".</li>                 <li>coordinated massive network overhaul replacing/upgrading ~90% of network infrastructure in order comply pl-2 requirements achieving approximately 99.8% system uptime. (up 88%)</li>                 <li>developed , implemented custom scripts throughout entire enabling highly customized real-time auditing/reporting of 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 ensuring confidentiality, integrity, , availability of systems , networks , data through utilization of risk analysis process. responsibilities include obtaining/maintaining information system accreditation (ssps/issp), integrate disaster recovery/contingency planning, establish security education, training, , awareness program, create configuration management (cm) process , conduct auditing & network monitoring.</p>             <ul>                 <li>accountable maintaining physical accountability of afin equipment, planning, , scheduling production, ordering, , management of materials, , track/order preventive maintenance.</li>                 <li>conducted tier i/ii desk support; directly involved in resolution of 500+ tickets.</li>                 <li>effectively provided technical support, in person, on phone , through online communication cutting ticket creation approximately 12% in less 3 months.</li>                 <li>successfully developed , implemented new ticket monitoring , reporting system cutting reporting time 80%.</li>                 <li>improved network vulnerability awareness approximately 30% developing , implementing vulnerability , 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 35th fighter wing supporting 44 units throughout japan. responsibilities include managing core network services including active directory, group policy, dns, , dhcp. other responsibilities included system lifecycle management, vulnerability identification/remediation, , tier 3 support.</p>             <ul>                 <li>team leader windows domain migration project, incorporate local base network air force intra-network (afin) -- lauded "best date" migration higher headquarters communications , information director.</li>                 <li>developed vulnerability management & mitigation rapid resolution program resulting in identification , resolution of on 25,000 vulnerabilities in less 2 weeks.</li>                 <li>developed batch/powershell script suite used identify/correct operating system errors, perform customized system maintenance, remediate patching shortfalls, , detect os vulnerabilities resulting in 25% drop in tier 1 tickets , 22% improvement in patching, , improved system life cycle.</li>             </ul>         </div>     </div>     <!-- divider --> </div> 

i had faced similar problem flex included issue absolutely positioned child divs inside flex containers in firefox. advice against using flex because of reason stated cross browser compatibility.

so dropped flex , used metrics vw, vh , vmin( vm ie ) instead. these units tied in viewport , allow fluidic layouts elegant code. can use these units fonts more responsive design.

here's jsfiddle demonstrating this. runs in browsers , responsive well.

and here's 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 , control system weapon system (cscs/ws) responsible 1,070 firewalls, proxies, , vpn’s across 121 geographically separated locations in order evaluate, detect, prevent , implement countermeasures protect clients, networks, , data & voice systems include secure internet protocol routing (sipr) network mission systems 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 defensive cyber operations (dco) missions.</li>  				<li>bolstered data mining capabilities 55% meticulously developing new electronically stored information (esi) requests logging/search process.</li>  				<li>promptly identified , resolved critical air force security assistance center (afsac) service outage identifying , resolving 8 firewall security tunnel circuits enabling $166b global peacekeeping operations.</li>  			</ul>  		</div>  	</div>