alexandernst alexandernst - 6 months ago 17
HTML Question

Overflow with a flex div not working in FF

I have a simple demo of an error I found. There is a flex div and a few images inside.

The sizes of the div and the images are unknown, I put some fixed values just to represent the problem.

The problem is that the images are not overflowing the div's width in FF, but they do in Chrome (the expected and desired behavior).

The main goal is to make only 3 images to be visible (33.3333% of the div's width for each image), even if there are more than 3 images.

Demo: http://codepen.io/alexandernst/pen/mPoeLP

HTML:

<div class="wrapper">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
<img class="box" src="http://placehold.it/150x150">
</div>


CSS:

.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
display: flex;
overflow: hidden;
}

.box {
border: 1px solid green;
max-width: 33.33333%;
position: relative;
padding-right: 10px;
align-self: center;
}

Answer

I'd suggest wrapping each of the images in a div and use the .box class on that instead.

Seems to work in Chrome 51 + FF 46

* {
  box-sizing: border-box;
}
.wrapper {
  border: 1px solid red;
  width: 400px;
  height: 200px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.box {
  border: 1px solid green;
  flex: 0 0 33.33333%;
  position: relative;
  padding-right: 10px;
}
.box img {
  width: 100%;
  height: auto;
  display: block;
}
<div class="wrapper">
  <div class="box">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="box">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="box">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="box">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="box">
    <img src="http://placehold.it/150x150">
  </div>
</div>