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
Post a Comment