My goal is to create a dynamic grid layout using flex wrap and min-width: 50%, where each cell should occupy the entire width. However, I'm encountering an issue in iOS 10.1.1 (iPhone 5c) Safari and Chrome where the display is not grid-like but rather a horizontal layout. Interestingly, the layout works correctly in desktop Chrome (Ubuntu) and Android Chrome.
You can view the Jsfiddle demo here: https://jsfiddle.net/9dscc1Lq/
Here's the code snippet:
<style>
body {
width: 300px;
}
.tabs {
width: 100%;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
box-sizing: border-box;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
.tab {
border: 1px solid #3A3A3A;
color: #929292;
min-width: 50%;
box-sizing: border-box;
flex: 1 1 0;
-webkit-flex: 1 1 0;
text-align: center;
}
</style>
<div class="tabs">
<div class="gwt-HTML tab">1</div>
<div class="gwt-HTML tab">2</div>
<div class="gwt-HTML tab">3</div>
<div class="gwt-HTML tab">4</div>
<div class="gwt-HTML tab">5</div>
</div>
Expected layout (correct):
https://i.sstatic.net/Qy7jV.png
iOS behavior (incorrect): https://i.sstatic.net/4D9oi.png
Your insights on how to resolve this issue would be greatly appreciated!