Please see this fiddle where the layout works well in chrome, firefox but not Safari..
html..
<div class="row flex-at-desktop">
<div class="col-sm-6 col-xs-12"><!--col1-->
<img src="http://2cousins.designbankdevelopment.co.uk/wp-content/themes/shapely/images/2.jpg" alt="" />
</div>
<div class="col-sm-6 col-xs-12"><!--col2-->
<div class="something-semantic">
<div class="something-else-semantic">
<p>my text</p>
</div>
</div>
</div>
</div><!--end of row-->
css..
.flex-at-desktop {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
.something-semantic {
display: table;
width: 100%;
height:100%
}
.something-else-semantic {
display: table-cell;
vertical-align: middle;
background:#ccc
}
https://jsfiddle.net/3me544L3/1/
The aim is to have the column with the text in match the height of the image in the other column, and once that happens - to align the text vertically in the div. This is working well in some browsers but in Safari the div doesnt adapt to full height?
