How can I fix flex 50% layout issue in Safari? - html

Question

I have a small example of flex layout and I have some problem with Safari (Version 10.1.2 (12603.3.8))
So there is a content and inside of it there are four boxes, with the layout of 2x2. At the bottom there is a footer section.
I would like to place the boxes inside the content div to fill its height by 50% height and width. But in Safari it seems that it ignores the footer section and it places the boxes to align to the full page.
So here it what I want to achieve and it works in chrome:
And this is what it looks like in Safari:
I managed to try it in High Sierra where there is a newer Safari (Ver. 11) and it WORKS. So it must be a bug, but can we handle this in Safari 10? Thank you!
Here it is my code
HTML:
* {
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
background: white;
border: 1px solid tomato;
}
.box {
width: 50%;
height: 50%;
background: skyblue;
border: 1px solid black;
}
.footer {
opacity: 0.7;
flex: 0 0 auto;
height: 100px;
background: plum;
}
<div class="wrapper">
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="footer"></div>
</div>

Answer 1

Since content is a flex column item you don't use height to make it fill its parent, you use flex-grow.
Remove the height on content and add flex-grow: 1
.content {
flex-grow: 1; /* added */
display: flex;
flex-wrap: wrap;
background: white;
border: 1px solid tomato;
}
Also no need for width: 100%, it does that by default
Stack snippet
* {
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
background: white;
border: 1px solid tomato;
}
.box {
width: 50%;
background: skyblue;
border: 1px solid black;
}
.footer {
opacity: 0.7;
flex: 0 0 auto;
height: 100px;
background: plum;
}
<div class="wrapper">
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="footer"></div>
</div>