vertically align content within Chrome - html

Question

I got a situation where flex box is not working the way I want it to within Chrome but it works in other browsers (apart from iOS mobile devices).
I am struggling to vertically align any content within Chrome but works in everything else. Any ideas?
Also, does anyone know a way I can dynamically stretch a div to a certain % of the div class content which will also work within chrome?
Thanks in advance. See the bottom for demo and screenshots.
HTML
<div class="container">
<div class="content">
<h2>Ticket System <span style="color:#339933; font-weight:bold;">Open</span> Customer Ticket List</h2>
<a class="BlueButton" href="ticket_view_cust_ticket.php">Open Customer Tickets</a>
<a class="BlueButton" href="ticket_view_cust_ticket_rejected.php">Rejected Customer Tickets</a>
<div class="centerContent">
There are currently no open customer tickets
</div>
</div>
</div>
CSS
html,body
{
height: 100vh;
}
body
{
display: table;
margin: 0 auto;
font-family: Tahoma,Arial,Sans-Serif;
}
.container
{
height: 98vh;
vertical-align: middle;
width: 70vw;
min-width:1024px;
margin-left:auto;
margin-right:auto;
margin-top: 1vh;
display: flex;
flex-direction: column;
}
.content
{
background-color: #ff0000;
flex: auto;
webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
webkit-flex-shrink: 0;
-moz-flex-shrink: 0;
-ms-flex-shrink: 0;
-o-flex-shrink: 0;
flex-shrink: 0;
text-align: center;
font-size: 12px;
padding-top:20px;
min-height:600px;
}
.centerContent
{
height: 95%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
Demo - https://jsfiddle.net/qr2tpgo6/1/
Container Screenshot - http://prntscr.com/azp8bk
Firefox - http://prntscr.com/azp4oj
Chrome - http://prntscr.com/azp4hy

Answer 1

Your container is missing display: flex, so flex properties aren't working.
Add this:
.content
{
background-color: #ff0000;
flex: auto;
flex-direction: column;
flex-shrink: 0;
text-align: center;
font-size: 12px;
padding-top:20px;
min-height:600px;
display: flex; /* new; establish flex container */
justify-content: center; /* new; center children vertically */
}
Revised Fiddle