Flexbox layout breaking in Safari 8

Question

I am currently setting up some tiles which uses flexbox, and are meant to take up the entire height of the tallest tile.

I am using the following code on the container of for the tiles:

{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

I have tried my implementation in the latest version of Safari, Chrome and FF, where everything works as expected. However when i try it out in safari 8, the tiles does not take up the full height of the tallest tile.

I have checked on http://caniuse.com/ and flexbox should be supported with prefixes in Safari 8.

See code pen here: http://codepen.io/fennefoss/pen/WoqBqq

possible guidance: http://stackoverflow.com/q/33636796/3597276 — Michael Benjamin, Dec 28 '16 at 13:21
Maybe is was to quick to answer, but do you mean the text overlap in the 2:rd box? .. Or you have some other visual issue? ... Also, using `float` in combo with `flexbox` might cause issues too, so I recommend to remove those (I did in below linked codepen and it still work) — Asons, Dec 28 '16 at 13:39
Could you let me know what is not working with the answer a gave, so I will be able to adjust and you to accept? — Asons, Jan 14 '17 at 12:29

Asons · Accepted Answer · 2016-12-28T14:09:40.780

As you use an absolute positioned element at the bottom, your promotion__box need to take its space into account, here done with an extra padding

Updated codepen

.promotion__box {
    color: #666;
    font-size: 1.3333333333em;
    margin-top: -2%;
    padding: 10px 0 80px 20px;     /*  added 80px to bottom  */
    margin: 0 auto;
    width: 250px;
}

Sample snippet

.row-type14 {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.row-type14__slot1,
.row-type14__slot2,
.row-type14__slot3,
.row-type14__slot4 {
    box-sizing: border-box;
    margin-right: 2.1276595745%;
    width: 23.4042553191%;
    position: relative;
}

.widget__promotion {
    box-sizing: border-box;
    margin-right: 2.1276595745%;
    width: 100%;
    margin-right: 0;
    height: 100%;
    background: #e4e4e4;
}

.promotion__image {
    height: auto;
    width: 100%;
}

.promotion__box {
    color: #666;
    font-size: 1.3333333333em;
    margin-top: -2%;
    padding: 10px 0 80px 20px;  
    margin: 0 auto;
    width: 250px;
}

.promotion__links {
    bottom: 2.49rem;
    left: 0;
    position: absolute;
    right: 0;
    margin: 0 auto;
    text-align: center;
}

<ol class="row-type14">



    <li class="row-type14__slot1 js-row-item">

        <article class="widget__promotion" data-layer-promotion-view="{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:1,&quot;id&quot;:&quot;slh-home-promotion-widget-1&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}">
            <a data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:1,&quot;id&quot;:&quot;slh-home-promotion-widget-1&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">



                <img src="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660" srcset="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660 660w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=870 870w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=1280 1280w" data-size="hero" alt="Selected Image" class="promotion__image" sizes="100vw">

            </a>

            <div class="promotion__box promotion__box-graphic">

                <h3 class="promotion__box-title">Selected Promotion</h3>

                <span class="promotion__box-subtitle">#selectedhomme</span>

            </div>
            <div class="promotion__links">

                <a class="promotion__call-to-action" data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:1,&quot;id&quot;:&quot;slh-home-promotion-widget-1&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Read more
</a>

                <a class="promotion__call-to-action" data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:1,&quot;id&quot;:&quot;slh-home-promotion-widget-1&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Shop now
</a>
            </div>
        </article>

    </li>




    <li class="row-type14__slot2 js-row-item">


        <article class="widget__promotion" data-layer-promotion-view="{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:2,&quot;id&quot;:&quot;slh-home-promotion-widget-2&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}">
            <a data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:2,&quot;id&quot;:&quot;slh-home-promotion-widget-2&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">



                <img src="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660" srcset="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660 660w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=870 870w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=1280 1280w" data-size="hero" alt="Selected Image" class="promotion__image" sizes="100vw">

            </a>

            <div class="promotion__box promotion__box-graphic">

                <h3 class="promotion__box-title">Selected Promotion</h3>

                <span class="promotion__box-subtitle">#selectedhomme some other text text text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text more text</span>

            </div>
            <div class="promotion__links">

                <a class="promotion__call-to-action" data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:2,&quot;id&quot;:&quot;slh-home-promotion-widget-2&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Read more
</a>

                <a class="promotion__call-to-action" data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:2,&quot;id&quot;:&quot;slh-home-promotion-widget-2&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Shop now
</a>
            </div>
        </article>

    </li>




    <li class="row-type14__slot3 js-row-item">

        <article class="widget__promotion" data-layer-promotion-view="{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:3,&quot;id&quot;:&quot;slh-home-promotion-widget-3&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}">
            <a data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:3,&quot;id&quot;:&quot;slh-home-promotion-widget-3&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">



                <img src="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660" srcset="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660 660w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=870 870w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=1280 1280w" data-size="hero" alt="Selected Image" class="promotion__image" sizes="100vw">

            </a>

            <div class="promotion__box promotion__box-graphic">

                <h3 class="promotion__box-title">Selected Promotion</h3>

                <span class="promotion__box-subtitle">#selectedhomme</span>

            </div>
            <div class="promotion__links">

                <a class="promotion__call-to-action" data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:3,&quot;id&quot;:&quot;slh-home-promotion-widget-3&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Read more
</a>

                <a class="promotion__call-to-action" data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:3,&quot;id&quot;:&quot;slh-home-promotion-widget-3&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Shop now
</a>
            </div>
        </article>

    </li>




    <li class="row-type14__slot4 js-row-item">

        <article class="widget__promotion" data-layer-promotion-view="{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:4,&quot;id&quot;:&quot;slh-home-promotion-widget-4&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}">
            <a data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:4,&quot;id&quot;:&quot;slh-home-promotion-widget-4&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">

                <img src="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660" srcset="http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=660 660w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=870 870w,http://sits-pod39.demandware.net/dw/image/v2/ABBT_S25/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg?sw=1280 1280w" data-size="hero" alt="Selected Image" class="promotion__image" sizes="100vw">

            </a>

            <div class="promotion__box promotion__box-graphic">

                <h3 class="promotion__box-title">Selected Promotion</h3>

                <span class="promotion__box-subtitle">#selectedhomme something more ! dasdsadas dasdsad dasdas dsadsads dsadsadsadas</span>

            </div>
            <div class="promotion__links">

                <a class="promotion__call-to-action" data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:4,&quot;id&quot;:&quot;slh-home-promotion-widget-4&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Read more
</a>
                <a class="promotion__call-to-action" data-layer-click="{&quot;event&quot;:&quot;promotionClick&quot;,&quot;ecommerce&quot;:{&quot;promoClick&quot;:{&quot;promotions&quot;:[{&quot;row_type&quot;:&quot;14 tall ones&quot;,&quot;row_id&quot;:&quot;home-page-row-08-widget&quot;,&quot;column_id&quot;:4,&quot;id&quot;:&quot;slh-home-promotion-widget-4&quot;,&quot;name&quot;:&quot;Selected promotion widget&quot;,&quot;creative&quot;:&quot;/on/demandware.static/-/Library-Sites-bestseller-content-library/default/dw27cfa007/images/homepage/customer-service.jpg&quot;}]}}}" href="/on/demandware.store/Sites-BSE-Nordic-Site/no_NO/Page-Show?cid=help-link" target="_self">
Shop now
</a>
            </div>
        </article>

    </li>

</ol>

The codepen seems to just keep reloading when i try to open it :S — Mikkel Fennefoss, Dec 28 '16 at 14:02

Flexbox layout breaking in Safari 8

1 Answers1