Flexbox in Firefox - html

Question

I have been building a site and have been experimenting with display:flexand had some success in implementing what I feel is a nice enough thumb-nail block element.
However, in Firefox it does this:
I have tested it and it seems to be an issue with the use of display:flex and position:absolute.
I have read that Firefox treats absolute positioning differently than others browsers I have tested in.
Chrome
Edge
Opera
I have experienced a similar issue in:
Internet Explorer 11
Safari 5.1.7
Firefox 50.1.0
HTML
<section id="services" class="text-center center-block">
<div class="container">
<div class="row">
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey mb-30">
<img src="img/picto/originals/png/Pound/Newable_Pictogram_CoolGrey_POUND.png" width="156" height="200" alt="" />
<div class="caption">
<p class="bold">Attractive commissions for business introductions, paid promptly.</p>
</div>
</div>
</div>
<!-- Block -->
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey mb-30">
<img src="img/picto/originals/png/Arrows/Newable_Pictogram_Navy_ARROWS.png" width="200" height="199" alt="" />
<div class="caption">
<p class="bold">We’re committed to delivering fast, and treating you and your clients fairly.</p>
</div>
</div>
</div>
<!-- Block -->
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey mb-30">
<img src="img/picto/new/Newable_Pictogram_Navy_GROWTH.png" width="271" height="200" alt="" />
<div class="caption">
<p class="bold">We are a trusted, long established and large-scale Responsible Finance Provider.</p>
</div>
</div>
</div>
<!-- Block -->
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey mb-30">
<img src="img/picto/new/Newable_Pictogram_cool_grey_PARTNER.png" width="200" height="200" alt="" />
<div class="caption">
<p class="bold">Incentive-led schemes to promote long term business development partnership.</p>
</div>
</div>
</div>
<!-- Block -->
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey">
<img src="img/picto/originals/png/Speech Bubbles/Newable_Pictogram_CoolGrey_SPEECHBUBBLES.png" width="263" height="200" alt="" />
<div class="caption">
<p class="bold">Best in class broker support package including dedicated account manager.</p>
</div>
</div>
</div>
<!-- Block -->
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey">
<img src="img/picto/originals/png/Infinity/Newable_Pictogram_Navy_INFINITY.png" width="215" height="100" alt="" />
<div class="caption">
<p class="bold">We partner with finance brokers, financial advisors, High Street banks, solicitors and accountants.</p>
</div>
</div>
</div>
<!-- Block -->
</div>
</div>
</section>
CSS
.thumbnail {
border: none;
min-height: 500px;
position: relative;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.thumbnail img {
padding-top: 0;
max-height: 50%;
max-width: 50%;
padding-bottom: 25%;
}
.caption {
position: absolute;
bottom: 0;
}
Am I just using display:flex incorrectly?

Answer 1

Check this basic example of your scenario (commented .caption padding just to make it clearer):
Added flex-flow: column wrap; to .thumbnail.
div.thumbnail {
border: none;
min-height: 500px;
position: relative;
display: -webkit-flex;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
.thumbnail img {
padding-top: 0;
max-height: 50%;
max-width: 50%;
/* padding-bottom: 25%; */
}
.caption {
/* position: absolute; */
/* bottom: 0; */
max-width: 50%;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="services" class="text-center center-block">
<div class="container">
<div class="row">
<!-- Block -->
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="thumbnail grey mb-30">
<img src="http://placehold.it/300x300" width="156" height="200" alt="" />
<div class="caption">
<p class="bold">Attractive commissions for business introductions, paid promptly.</p>
</div>
</div>
</div>
</div>
</div>
</section>