Flexbox div stretch different in Chrome and Firefox

Question

I got a strange problem, I have a div wrap another div, structure like below:

<div class="col-md-4 view small_img">
    <div class="blue"></div>
</div>

I want when I hover over div.small_img a black block will cover on blue block, so I set it on :after and use flexbox and positioning.

Everything looks great in Chrome, but when I switch to Firefox, I don't know why that background didn't cover on my blue block but only show a small square beside it.

.small_img {
  position: relative;
  overflow: hidden;
  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;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small_img:hover:before,
.small_img:hover:after {
  content: '';
  position: absolute;
}
.small_img:hover:before {
  content: 'view';
  border: 2px solid hsl(0, 0%, 100%);
  border-radius: 10px;
  line-height: 2em;
  padding: 5px;
  color: white;
  z-index: 5;
}
.small_img:hover:after {
  width: 92.5%;
  height: 92.5%;
  background: hsla(0, 0%, 0%, 0.85);
}
.small_img img {
  height: 100%;
}
.blue {
  background: hsl(220, 100%, 60%);
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

<div id="page-wrapper">
  <div class="row">
    <h1 class="page-header center">flexbox hover cover effect</h1>
    <h4 class="center">I want black block cover my blue block</h4>
    <!-- main Content -->
    <div class="row col-md-offset-1 col-md-10">
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
    </div>
  </div>
</div>

Anyone know what's happened?

Including my jsfiddle too.

kukkuz · Accepted Answer · 2016-12-23T14:43:24.770

You can fix this by setting the top and left of .small_img:hover:after - see demo below and updated fiddle here.

.small_img {
  position: relative;
  overflow: hidden;
  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;
  display: flex;
  justify-content: center;
  align-items: center;
}
.small_img:hover:before,
.small_img:hover:after {
  content: '';
  position: absolute;
}
.small_img:hover:before {
  content: 'view';
  border: 2px solid hsl(0, 0%, 100%);
  border-radius: 10px;
  line-height: 2em;
  padding: 5px;
  color: white;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.small_img:hover:after {
  width: 92.5%;
  height: 92.5%;
  background: hsla(0, 0%, 0%, 0.85);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.small_img img {
  height: 100%;
}
.blue {
  background: hsl(220, 100%, 60%);
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

<div id="page-wrapper">
  <div class="row">
    <h1 class="page-header center">flexbox hover cover effect</h1>
    <h4 class="center">I want black block cover my blue block</h4>
    <!-- main Content -->
    <div class="row col-md-offset-1 col-md-10">
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
      <div class="col-md-4 view small_img">
        <div class="blue"></div>
      </div>
    </div>
  </div>
</div>

Thanks for your help, but I just want to know why that I can't just set Flexbox and justify-content and align-items to middle my black block? I thought that both attribute already have align affect, please can you give some explanation?/ and Merry X'mas :> — Horken, Dec 26 '16 at 01:59
This *is* because Firefox has not implemented the updated specs for an *absolutely positioned* flexbox child - see this for reference: http://stackoverflow.com/questions/39069320/absolute-positioning-interfering-with-flexbox-positioning-in-firefox — kukkuz, Dec 26 '16 at 02:28

Flexbox div stretch different in Chrome and Firefox

1 Answers1