Flexbox not wrapping in Firefox and IE11 - css

Question

I have a flexbox grid on my website which is not displaying correctly in IE11 and Firefox.
.section-home {
float: left;
}
/*** Flex Grid ***/
.flex-grid {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.flex-grid .flex-item {
display: flex;
display: -webkit-flex;
margin-top: 2rem;
}
<div class="section-home">
<!-- PRODUCTS -->
<div class="products-home flex-grid">
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('cuadrospersonalizados') }}">
<img class="img-responsive" src="{{ FotImg::asset('img/fotolienzos.jpg') }}?dts={DPL_TS}" alt="Cuadros personalizados" title="Cuadros personalizados">
<span class="description">
<p>Lienzo con tus fotos colocado sobre madera de pino</p>
</span>
<div class="caption">
<h2>Fotolienzos</h2>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('fotolienzosconreloj') }}">
<img class="img-responsive" alt="Fotolienzos con Reloj" title="Fotolienzos con Reloj" src="{{ FotImg::asset('img/fotolienzos-con-reloj.jpg') }}?dts={DPL_TS}">
<div class="label-new">
<span class="new">novedad</span>
</div>
<span class="description">
<p>Lienzo personalizado con reloj colocado sobre bastidor de madera</p>
</span>
<div class="caption">
<h2>Fotolienzos con Reloj</h2>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('posterspersonalizados') }}">
<img class="img-responsive" alt="Pósters personalizados" title="Pósters personalizados" src="{{ FotImg::asset('img/posters-personalizados.jpg') }}?dts={DPL_TS}">
<span class="description">
<p>Pósters especialmente pensados para habitaciones juveniles e infantiles</p>
</span>
<div class="caption">
<h2>Pósters personalizados</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- PRODUCTS -->
</div>
The flex grid displays correctly in Chrome but in IE and Firefox the items stay on one line and do not wrap. Why is this?

Answer 1

Your problem is that the container around .flex-grid (.section-home) is set to float: left; and has no width set. This means it will be set to width: auto; which, as it is a floated element, will mean that its content will govern how wide it is. In this case there appears to be a difference in how the browsers choose to calculate the width:
Chrome limits .section-home to the width of its parent
IE lets .section-home grow as much as it needs to accommodate all children of .flex-grid
There are a couple of ways you could tackle this, however, the simplest will be to remove float: left; from .section-home as it appears it is not needed anyway.
.section-home {
/*float: left; Remove this*/
}
/*** Flex Grid ***/
.flex-grid {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.flex-grid .flex-item {
display: flex;
display: -webkit-flex;
margin-top: 2rem;
}
<div class="section-home">
<!-- PRODUCTS -->
<div class="products-home flex-grid">
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('cuadrospersonalizados') }}">
<img class="img-responsive" src="{{ FotImg::asset('img/fotolienzos.jpg') }}?dts={DPL_TS}" alt="Cuadros personalizados" title="Cuadros personalizados">
<span class="description">
<p>Lienzo con tus fotos colocado sobre madera de pino</p>
</span>
<div class="caption">
<h2>Fotolienzos</h2>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('fotolienzosconreloj') }}">
<img class="img-responsive" alt="Fotolienzos con Reloj" title="Fotolienzos con Reloj" src="{{ FotImg::asset('img/fotolienzos-con-reloj.jpg') }}?dts={DPL_TS}">
<div class="label-new">
<span class="new">novedad</span>
</div>
<span class="description">
<p>Lienzo personalizado con reloj colocado sobre bastidor de madera</p>
</span>
<div class="caption">
<h2>Fotolienzos con Reloj</h2>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="flex-item">
<div class="collection-item animated shown">
<div class="collection-wrap">
<div class="collection-image">
<a href="{{ route('posterspersonalizados') }}">
<img class="img-responsive" alt="Pósters personalizados" title="Pósters personalizados" src="{{ FotImg::asset('img/posters-personalizados.jpg') }}?dts={DPL_TS}">
<span class="description">
<p>Pósters especialmente pensados para habitaciones juveniles e infantiles</p>
</span>
<div class="caption">
<h2>Pósters personalizados</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- PRODUCTS -->
</div>