Flexbox в Firefox

Question

Я строил сайт и экспериментировал с display:flex и имел некоторые успехи в реализации того, что я чувствую, достаточно хороший элемент блока большого пальца ногтя.

Однако в Firefox делает это:

Я испытал это, и это, кажется, проблема с использованием display:flex и position:absolute.

Я прочитал, что Firefox рассматривает абсолютное позиционирование по-другому, чем другие браузеры я испытал в

• Chrome
• Грань
• Opera

я испытал подобный вопрос в.:

• I Проводник 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; 
} 

Могу ли я просто использовать display:flex Inco rrectly?

Answer 1

Проверить этот базовый пример вашего сценария (прокомментировал .captionpadding только, чтобы сделать его более ясным):

• Добавлено flex-flow: column wrap; в .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>