Flexbox no se envuelve y el porcentaje de ancho del niño no funciona

Flexbox no se envuelve y el porcentaje de ancho del niño no funciona

Estoy tratando de hacer una cuadrícula con 2 filas y 3 columnas usando flexbox.

Entonces, dentro de mi diseño, configuré un div principal como display:flex y configuré flex-wrap:wrap para obtener la segunda fila.

Entonces decidí establecer el ancho de los niños en 30 % (esperando que cada niño obtuviera el 30 % de los padres. En esta situación, mi cuadro debería aparecer con 3 elementos por fila).

¡Pero esto ahora está funcionando!

Aquí está mi código:

VIOLÍN: https://jsfiddle.net/q39zj6j2/13/

Y el CSS:

#destaquesHome {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap:wrap;
margin:0px 0 0 0px;
}

.destaquesHome-item {
width: 32%;
display: table;
margin:10px 0 0 0px;
height:100px;    
border:1px solid #C8C8C8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; 
}
Mostrar la mejor respuesta

En realidad heredas el elemento a width no #destaquesHome, .destaquesHome-item dentro del elemento a por eso está tomando el ancho del 32% del elemento a. Prueba de la siguiente manera:

#destaquesHome > a {
  min-width:32%;
  display: block;
}

.destaquesHome-item {
  width: 100%;
  display: table;
  margin:10px 0 0 0px;
  height:100px;    
  border:1px solid #C8C8C8;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;   
}

¡Funciona perfectamente! ¡Gracias!