Flexbox in Firefox

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?

possible duplicate: http://stackoverflow.com/q/32991051/3597276 — Michael Benjamin, Jan 18 '17 at 14:13

Syden · Accepted Answer · 2017-01-18T14:14:17.410

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>

Flexbox in Firefox

1 Answers1