CODEWITHSUNDEEP
htmlcssgoogle-chromesafariflexbox
Alex Wetton
Alex Wetton

Reputation: 197

Flexbox renders differently in different broswers

I coded my flexbox in Google Chrome (Version 44.0.2403.157) and the code works as intended. There is one column with a height of 100%, this column has two rows: header and content. The header has a height defined by the content, the content row has its height determined by the height of the browser minus the height of the head row. However when I tested my code in Safari (Version 8.0.2 (10600.2.5)), it was displayed as one row and two columns. I tried adding "width: 100%: to the row, to force there to only be one column however this did not work. What is causing this discrepancy and how do I 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 but mostly 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 - The height of the header is based on the content
</div> <!-- end of flex row header -->
<div class="row content">
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the header height
<br>
<br>
<br>
Content - The height of the content row is the total broswer height minus the 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 I want it to look)

enter image description here

Chrome (How I want it to look)

enter image description here

Upvotes: 0

Views: 72

Answers (1)

Stickers
Stickers

Reputation: 78686

Take a look of this http://caniuse.com/#feat=flexbox

You only need to set these on the 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 the child elements:

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

etc.

Upvotes: 1

Related Questions