Menu
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:
Rendered incorrectly with content box having overflow:
471
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.
174
This was a bug in older versions of Safari and how they handle flexbox. In the newest version 10.0.1, this is fixed.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
