Currently, I am facing an issue with Safari (Version 10.1.2 (12603.3.8)) while working on a small example of flex layout.
The problem arises when I attempt to place four boxes inside a content div in a 2x2 layout and have them fill the height and width by 50%. However, in Safari, the footer section seems to be disregarded, causing the boxes to align to the full page instead.
I aim to achieve this layout (which works perfectly in Chrome): https://i.sstatic.net/jLONP.png
But unfortunately, here is how it appears in Safari: https://i.sstatic.net/oZgYT.png
In my testing, I found that the layout functions as expected in High Sierra with a newer version of Safari (Ver. 11). This suggests a bug in Safari 10. Is there a workaround for this issue in Safari 10? Thank you!
Below is the code I have been working with:
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>