Overflow with a flex div not working in FF

Question

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;
}

Paulie_D · Accepted Answer · 2016-05-10 15:27:57Z

2

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>

answered May 10, 2016 at 15:27

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Francisco Romero Over a year ago

Why do you insert box-sizing on the root element?

Paulie_D Over a year ago

Force of habit mostly and to make sure that all the widths etc include the borders/padding etc.

Francisco Romero Over a year ago

But in some cases you need to add a padding to the currently width so I think it is not so good in all environments (I think).

Paulie_D Over a year ago

No but in general it's considered much simpler. Most modern CSS resets use it.

Francisco Romero Over a year ago

Nice to know it :). And the last question: is there an improvement on wrapping each image in a div for box-sizing property or is the same as put it directly on the images?

|

Francisco Romero · Accepted Answer · 2016-05-10 15:19:41Z

0

It is because you have padding-right. Try adding box-sizing: border-box;:

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

box-sizing will take padding in its calculations.

Updated codepen.

answered May 10, 2016 at 15:19

Francisco Romero

13.3k23 gold badges100 silver badges173 bronze badges

1 Comment

Francisco Romero Over a year ago

As I can understand, you want to avoid the overflow.

Collectives™ on Stack Overflow

Overflow with a flex div not working in FF

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related