Opera Mini flex not wrapping

Question

On Android 4.1, Opera Mini 33 doesn't support css flex layout. It does use the old 2009 flex standard (display: -webkit-box) except of box-lines: multiple;

I can not break a flex line, nothing is working:

box-lines: multiple;
-webkit-box-lines: multiple;
flex-wrap: wrap;
-webkit-flex-flow: row;
-webkit-flex-flow: wrap;

On other Android (7) it respects new flex syntax, with flex-wrap: wrap; Caniuse.com showes that Opera Mini supports flex, but it clearly doesn't.

Have someone faced this issue? Switching between data saving modes seems to be an option, the flex works ideally on mode "Extreme" but on all the other 3 modes it doesn't. I've reinstalled the Opera, even wiped out the system - no change.

How can I break the flex line in Opera Mini on Android 4.1? This is my actuall code:

<div class="test">
    <div></div>
    <div></div>
    <div></div>
</div>

.test {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 300px;
    margin: 100px auto;
    width: 600px; 
    -webkit-flex-flow: row;
    -webkit-flex-flow: wrap;
}

.test > div {
    width: 100px;
    flex-grow: 1;
    background: pink;
    height: 200px;
}
.test > div:nth-child(2) {
    background: yellow;
}
.test > div:last-of-type {
    background: blue;
    width: 100%;
}

prk_001 · Accepted Answer · 2018-04-13T08:56:42.963

No one seems to know the answer so I share my solution. Partial solution could be detecting by JS if browser supports flex-wrap and then add a class to the body and make separate styles for that.

This is the only way to do the detection, because Opera Mini in it's useragent includes "Opera Mini" only on "Extreme" mode data saving, any oher case Opera Mini showes as Opera Mobile (but actuall Opera Mobile works perfectly with the newest flex).

This simple code is enough to detect flex-wrap support:

var d = document.documentElement.style
if (!('flexWrap' in d) && !('WebkitFlexWrap' in d) && !('msFlexWrap' in d)){
    document.getElementsByTagName('body')[0].className+=' not-full-flex-support'
}

It is taken from this answer: https://stackoverflow.com/a/27047981/2796533

Opera Mini flex not wrapping

1 Answers1