Safari flex child horizontal scrollbar over content (incorrect content height)

user_2468189 0
Viewed 1490

I am creating a horizontally scrolled div (flex child) with child items.

It works great everywhere except in Safari.

It might not show the problem here on the StackOverflow code sample, because it is dependent on height properties of "all" parents. That is why I am setting html and body to height 100%.

html, body {
        height: 100%;
        width:100%;
    }
    
    #flexCont {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #scrollable {
        height:150px;
        white-space:nowrap;
        overflow-y:hidden;
        overflow-x:scroll;

        /* just for visualization */
        border:1px solid black;
        width:250px;
    }

    .item {
        display: inline-block;
        height:100%;

        /* just for visualization */
        border-bottom:15px solid black;
        box-sizing: border-box;
        margin-right:5px;
        width:50px;
        background: red;
    }
<html>
    <body>
    
    <div id="flexCont">
    <div id="scrollable">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    </div>
    
    </body>
    </html>

The issue is that Safari sets the .item's height to 100% of #scrollable's height (150px) even though the horizontal scrollbar is shown and the content area is smaller (135px).

It results in scrollbar appearing over the content.

Chrome and other correctly set the .item's height to 135px as expected (assuming 15px for scrollbar).

As mentioned, it is dependent on height property of all parents. Meaning if I remove height 100% from html, body or #flexCont it renders correctly. Furthermore if I remove display flex or at least flex-direction column, it renders correctly as well.

I have added the bottom black borders to better visualize it. If they cannot be seen, they are hidden behind the scrollbar.

Any idea how to fix it?

Bottom 15px (black) visible on Chrome and behind scrollbar on Safari.

Correct on Chrome - bottom 15px border is visible Incorrect on Safari - bottom 15px border is behind scrollbar

Edit: Damn Safari... adding border-bottom and box-sizing creates another issue (at least) when attempting to fix it with max-height:fill-available. Solutions must be tested without the border.

flexbox safari scrollbar css html
1 Answers

Adding height: fill-available; to the .item's seems to fix the issue.

.item {
    height: 100%;
    height: -webkit-fill-available;
}

Edit: Removed -moz-fill-available and fill-available as they are not neccessary to fix the issue in Safari and are breaking layout in Firefox.
Furthermore note that in Safari, you have to use -webkit-fill-available for all children of .item if you want them to have height based on their parent (.item), which creates further issues.

user_26013800
Related