CODEWITHSUNDEEP
htmlcssflexbox
alexandernst
alexandernst

Reputation: 15099

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

Upvotes: 1

Views: 47

Answers (2)

Paulie_D
Paulie_D

Reputation: 114991

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>

Upvotes: 2

Francisco Romero
Francisco Romero

Reputation: 13189

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.

Upvotes: 0

Related Questions