Example Flex Box layout for Android 6 (stock browser - WebView) -


i need way make flex box work in android webview stock browser, able achieve proper layouts on older android devices running android 4.4, when use on android 6, page renders blank.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>test flex layout</title>  <style>     html,     body,     .container {         height: 100vh; /*setting 100% here doesn't either, , makes android 4.4 render blank page*/         margin: 0px;     }       .container {         display: flex;         overflow: hidden;         -ms-flex-direction: column;         -webkit-flex-direction: column;         flex-direction: column;     }          .container > * {             -ms-flex: 0 0 auto;             -webkit-flex: 0 0 auto;             flex: 0 0 auto;             overflow: scroll;         }          .container > .header,         .container > .footer {             height: 50px;             background: grey;             color: white;             overflow: hidden;         }          .container > .main {             -ms-flex: 1 1 auto;             -webkit-flex: 1 1 auto;             flex: 1 1 auto;             display: flex;             overflow: hidden;             background: blue;         } </style>  </head>     <body>         <div class="container">             <div class="header">header</div>             <div class="main">                 content             </div>             <div class="footer">footer  </div>         </div>     </body> </html> 

this works fine on android 4.4 webview, fails on android 6 webview, works on android 6 chrome browser without issues though.

is there way make work on android 6 webview?


Comments

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

android - Robolectric "INTERNET permission is required" -

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -