Alex Wetton Alex Wetton - 5 months ago 27
HTML Question

Safari flexbox does not contain its elements properly

I have created a simple flexbox based page, which renders properly in Google Chrome (Version 44.0.2403.157), but not in Safari (Version 8.0.2 (10600.2.5)). I have added all of the relevant prefixes (I think) and have spent a lot of time looking at the inspector but I do not seem to have found the cause of the problem.

The page consists of a container and two flex rows. The first flex row (header) should have its height stretch to fit its content. The second flex row (content) should have a height of the browser height minus the header height, the overflow of this container is set to scroll. The code works fine when the content container does not have to scroll, but as soon as the content container has any overflow the header row no longer contains its content. What could be causing this?

The Code:

<html>
<head>
<style>
.box {
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Safari 6 */
display: flex; /* Modern browsers */
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
flex-flow: column;
height: 100%;
width: 100%;
border: 2px solid;
}


.box .row {
flex: 0 1 30px;
border: 2px solid;
width: 100%;
}

.box .row.header {
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
}

.box .row.content {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
overflow: scroll;
}

</style>
</head>

<body>
<div id="page-wrapper" style="height: 100%">
<div class="box">
<div class="row header">
<p>Header - The height of the header is based on the content</p>
<p>Header - The height of the header is based on the content</p>
</div> <!-- end of flex row header -->
<div class="row content">
<p>When the content box is full, the header row does not contain change its length to contain its content properly</p>
</div> <!-- end of flex row content -->
</div> <!-- end of flex box -->
</div> <!-- end of page wrapper -->
</body>
</html>


Rendered properly with content box having no overflow:

enter image description here

Rendered incorrectly with content box having overflow:

enter image description here

Answer

The reason the header isn't expanding is because you've specified flex-shrink: 1 on .box .row.header

By saying that the content is allowed to shrink you are letting the header get squished by the content area below it.

Change this:

.box .row.header {
  -ms-flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

To this:

.box .row.header {
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

And your page will now work in Safari.

Comments