Überlauf mit einem Flex div funktioniert nicht in FF

Question

Ich habe eine einfache Demo eines Fehlers, den ich gefunden habe. Es gibt ein Flex Div und ein paar Bilder im Inneren.

Die Größen der div und die Bilder sind unbekannt, ich habe einige feste Werte, nur um das Problem darzustellen.

Das Problem ist, dass die Bilder nicht die Breite der div in FF überlaufen, aber sie tun in Chrome (das erwartete und gewünschte Verhalten).

Das Hauptziel ist es, nur 3 Bilder sichtbar zu machen (33.3333% der div's Breite für jedes Bild), auch wenn es mehr als 3 Bilder gibt.

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

Ich würde vorschlagen, jedes der Bilder in einem div zu verpacken und stattdessen die Klasse .box zu verwenden.

scheint 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

Es ist, weil Sie padding-right haben. Versuchen Sie, 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-sizingpadding in seinen Berechnungen stattfinden wird.

Updated codepen.