html - Flexbox renders differently in different broswers -


i coded flexbox in google chrome (version 44.0.2403.157) , code works intended. there 1 column height of 100%, column has 2 rows: header , content. header has height defined content, content row has height determined height of browser minus height of head row. when tested code in safari (version 8.0.2 (10600.2.5)), displayed 1 row , 2 columns. tried adding "width: 100%: row, force there 1 column did not work. causing discrepancy , how fix it?

<html> <head> <style> .box { display: -webkit-flex; display: -webkit-box; /* old - ios 6-, safari 3.1-6 */ display: -moz-box;    /* old - firefox 19- (buggy works) */ display: -ms-flexbox;  /* tweener - ie 10 */ display: -webkit-flex; /* new - chrome */ display: flex;         /* new, spec - opera 12.1, firefox 20+ */   flex-flow: column;   height: 100%;   width: 100%;   border: 2px solid; }   .box .row {   flex: 0 1 30px;     border: 2px solid;     width: 100%; }  .box .row.header { -webkit-flex: auto;   flex: 0 1 auto; }  .box .row.content {   flex: 1 1 auto;     overflow: scroll; }  </style> </head> <body> <div id="page-wrapper" style="height: 100%"> <div class="box"> <div class="row header"> header - height of header based on content </div> <!-- end of flex row header --> <div class="row content"> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br> content - height of content row total broswer height minus header height <br> <br> <br>  </div> <!-- end of flex row content --> </div> <!-- end of flex box --> </div> <!-- end of page wrapper --> </body> </html>

safari (not how want look)

enter image description here

chrome (how want look)

enter image description here

take of http://caniuse.com/#feat=flexbox

you need set these on container:

display: -ms-flexbox;  /* ie 10 */ display: -webkit-flex; /* safari 8 */ display: flex;         /* modern browsers */

and:

-ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;

for child elements:

-ms-flex: 0 1 auto; -webkit-flex: 0 1 auto; flex: 0 1 auto;

etc.


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more