Justify-content value of space-between not working for iOS Chrome and Safari browsers

Question

Other SO posts like this did not solve our issues with justify-content on iOS Chrome and Safari browsers. The content is not evenly distributed within the parent container when using the space-between value.

As you can see from this JSFiddle, the justify-content property works as expected on the desktop, but not on mobile.

We tried Chrome and Safari on iOS 8.x, and neither distributed the children evenly.

Code:

<div id='app_page'>
    <div class='button_box'>
        <div class='share_icon'></div>
        <div class='share_icon'></div>
        <div class='share_icon'></div>
        <a href='/' class='download' target='_blank'>GET</a>
    </div>
</div>

#app_page { width: 100% }

#app_page .button_box { 
    width: 100%; 
    box-sizing: border-box; 
    display: flex; 
    justify-content: space-between;
}

#app_page .button_box .download { 
    vertical-align: top; 
    background: black; 
    width: 36px; 
    height: 36px; 
    line-height: 36px; 
    display: inline-block; 
    color: #fff; 
}

#app_page .button_box .share_icon { 
    cursor: pointer; 
    display: inline-block; 
    background: black; 
    height: 36px; 
    width: 36px;
}

Solution 1

For Webkit-Browsers below iOS 9.0 you need to use vendor prefixes:

display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;

Your snippet:

#app_page { width: 100% }

#app_page .button_box { 
    width: 100%; 
    box-sizing: border-box; 
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

#app_page .button_box .download { 
    vertical-align: top; 
    background: black; 
    width: 36px; 
    height: 36px; 
    line-height: 36px; 
    display: inline-block; 
    color: #fff; 
}

#app_page .button_box .share_icon { 
    cursor: pointer; 
    display: inline-block; 
    background:black; 
    height: 36px; 
    width: 36px;
}

<div id='app_page'>
    <div class='button_box'>
        <div class='share_icon'></div>
	    <div class='share_icon'></div>
	    <div class='share_icon'></div>
		<a href='/' class='download' target='_blank'>GET</a>
	</div>
</div>

Solution 2

Although Safari 9 supports all standard flex properties, with Safari 8 and older you'll need to use vendor prefixes.

For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

For flexbox browser support details see here: http://caniuse.com/#search=flexbox