I'm trying to use flex wrap and min-width: 50% to dynamic grid layout where single cells occupy all width. The problem is that it's not working correctly in iOS 10.1.1 (iPhone 5c) Safari and Chrome - the display is not grid-like, but a horizontal layout. In desktop Chrome (Ubuntu) and Android Chrome is working fine.
Jsfiddle demo: https://jsfiddle.net/9dscc1Lq/
Code:
<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):
iOS behavior (incorrect):
Please advise!
min-width
doesn't work as intended on iOS, use flex-basis
like this flex: 1 1 50%;
Src: https://bugs.webkit.org/show_bug.cgi?id=136041
Also, when using prefixed properties, you should always put them before the unprefixed version.
.tabs {
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
box-sizing: border-box;
}
.tab {
border: 1px solid #3A3A3A;
color: #929292;
box-sizing: border-box;
-webkit-flex: 1 1 50%;
flex: 1 1 50%;
text-align: center;
}
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With