CODEWITHSUNDEEP
csssafariflexbox
user3442308
user3442308

Reputation: 11

Nested flexbox not working in Safari 10.1.2

I have some nested flexbox layouts which work perfectly in Chrome & Safari 11+, but behaves incorrectly in Safari 10.1.2

In Chrome - it looks as expected:

Chrome behaviour

However in Safari 10.1.2:

Safari behaviour

Could someone help me figure out how to fix? Thanks!

Here's my (slightly simplified) HTML:

<div class="content-canvas">
    <div class="horizontal-section" id="blog">
        <h1>Blog</h1>
        <div id="divRss">
            <ul class="feedEkList">
                <li>
                    <div class="itemTitle"><a href="#</a></div>
                    <div class="itemDate">10/16/2017</div>
                    <div class="itemContent">Some text</div>
               </li>
               <li>
                   As above
               </li>
            </ul>
        </div>
        <a href="##" target="_blank">Read more</a>
    </div>
    <div class="horizontal-section" id="upcoming">
    ...
    </div>
</div>

And my CSS:

.content-canvas {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-grow: 2;
    -o-flex-grow: 2;
    flex-grow: 2;
}

#blog,
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
 }

#divRss,
{
    padding: 10px;
    height: 0;
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-grow: 2;
    -o-flex-grow: 2;
    flex-grow: 2;
}

.feedEkList,
{
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    justify-content: space-around;
}

.feedEkList li,
 {
    height: 0;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-grow: 1;
    -o-flex-grow: 1;
    flex-grow: 1;
}

Upvotes: 1

Views: 1493

Answers (1)

Vic Seedoubleyew
Vic Seedoubleyew

Reputation: 10526

I personally had a problem on Safari when the content of my upper flexbox was more than 100% of its height, in which case the nested flexbox had its height shrunk to 1px.

I fixed it by setting flexbox-shrink: 0 on nested flexbox.

Upvotes: 5

Related Questions