Overflow with a flex div not working in FF - html

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

Answer 1

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>

Answer 2

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.