flexbox height issues in safari 5.1.7

I’m using flexbox within container but I’m having a bit difficulty setting the height of the flex element. The html body height I’ve set to 100%, the container element inherits the height from body. Within the container I’m using a flex element which is having issues with height in safari 5.1.7
It works perfectly fine in Firefox 82, Chrome, Edge 86, Explorer 11, Opera

The CSS I’ve used:

[code]
body,
html {
min-height: 100%;
}

.content {
min-height: inherit;
border: 1px solid #000;
}

.flex-bx {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}

.registersignup-loginsignin {
width: 100%;
min-height: 100vh;
// min-height: 100%;
justify-content: center;
align-items: center;
border: 1px solid #FF0000;
}
[/code]

For the HTML

[code]
<div class=”container content”>
<div class=”registersignup-loginsignin flex-bx”>

</div>
</div>
[/code]

I’ve tried height as vh and also % as you can see

Any ideas on how to set this? any pointers/ corrections/ suggestions/ solutions much appreciated

Many Thanks

Also in #CSS _↴