Flexbox product grid not works - css

Question

I have a product grid with Bootstrap and I added flexbox styles for the products .item box have same height.
You can check the grid here:
https://jsfiddle.net/oet3c3dp/2/
I add the basic flexbox styles, for the parent element .product-list:
.product-list {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
And then I added the styles for the child's elements:
.product-list .item {
padding: 0 10px 10px 0px;
margin-left: 0;
float: left;
text-align: center;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
}
Why this not works fine?

Answer 1

You are missing classes .container and .row (which they are part of the bootstrap grid), plus you need to change your flex: 0 0 auto to flex:1
.product-list {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.product-list .item {
padding: 0 10px 10px 0px;
margin-left: 0;
float: left;
text-align: center;
-webkit-flex: 1;
flex: 1;
}
.product-list .color-swatch {
width: 16px;
height: 16px;
border: 1px solid;
border-color: #d8d9db;
display: inline-block;
vertical-align: middle;
-webkit-border-top-right-radius: 50%;
border-top-right-radius: 50%;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-webkit-border-radius: 50%;
border-radius: 50%;
background-clip: padding-box;
-webkit-box-shadow: 0 3px 8px -5px black inset, -3px -1px 8px -4px white inset;
box-shadow: 0 3px 8px -5px black inset, -3px -1px 8px -4px white inset;
}
.product-list h3 {
font-size: 14px;
margin: 0px;
text-transform: uppercase;
margin-top: 2px;
}
.item-inner {
position: relative;
padding: 0 18px;
border: 1px solid #e0e0e0;
background-color: #fff;
/*min-height: 300px*/
}
.product-img {
padding-top: 10px;
text-align: center;
/* min-width: 210px;
height: 220px;*/
overflow: hidden;
/*width: 170px;*/
}
.product-info {
position: relative;
/*height: 73px;*/
padding-top: 20px;
}
.product-info span.extra-info {
display: block;
color: #455A64;
font-size: 12px;
}
.product-img img {
display: inline-block;
vertical-align: middle;
/* max-width: 210px;
max-height: 210px;*/
}
.product-list .item .price {
color: #37474F;
font-weight: 700;
font-size: 18px;
margin-right: 10px;
}
.product-list .item .product-id {
color: #455A64;
}
.product-list .item-inner:hover {
box-shadow: 0 3px 6px 0 rgba(51, 51, 51, .2);
}
.product-list .item a:hover {
color: #651fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="product-list row">
<div class="item col-xs-6 col-sm-3">
<div class="item-inner">
<a href="">
<div class="product-img">
<img class="img-responsive" src="http://rp-static.com/common/images/products_new/1728/1_m.jpg?dts={DPL_TS}" alt="">
</div>
<div class="product-info">
<div class="block">
<span class="price">9,95 €</span>
<span class="product-id">#1728</span>
</div>
<h3>TAZA CERAMICA</h3>
</div>
</a>
</div>
</div>
<div class="item col-xs-6 col-sm-3">
<div class="item-inner">
<a href="">
<div class="product-img">
<img class="img-responsive" src="http://rp-static.com/common/images/products_new/2100/1_m.jpg?dts={DPL_TS}" alt="">
</div>
<div class="product-info">
<div class="block">
<span class="price">16 €</span>
<span class="product-id">#2100</span>
</div>
<h3>MATRICULA MINI</h3>
</div>
</a>
</div>
</div>
<div class="item col-xs-6 col-sm-3">
<div class="item-inner">
<a href="">
<div class="product-img">
<img class="img-responsive" src="http://rp-static.com/common/images/products_new/2638/1_m.jpg?dts={DPL_TS}" alt="">
</div>
<div class="product-info">
<div class="block">
<span class="price">29 €</span>
<span class="product-id">#2638</span>
</div>
<h3>RELOJ PULSERA ZAC</h3>
</div>
</a>
</div>
</div>
<div class="item col-xs-6 col-sm-3">
<div class="item-inner">
<a href="">
<div class="product-img">
<img class="img-responsive" src="http://rp-static.com/common/images/products_new/5407/1_m.jpg?dts={DPL_TS}" alt="">
</div>
<div class="product-info">
<div class="block">
<span class="price">39 €</span>
<span class="product-id">#5407</span>
</div>
<h3>BOLSO VAQUERO PEQUEÑO</h3>
</div>
</a>
</div>
</div>
</div>
</div>