Tratando de crear tarjetas dinámicas react-mdl con altura y ancho específicos. El problema proviene de que un flotador es más largo que el ancho de la tarjeta en la que se encuentra. ¿Cómo puedo arreglar el flotador o los contenedores para permitir que las tarjetas estén igualmente espaciadas y de tamaño dinámico en cada fila?

Aquí está el código actual para el contenedor y la tarjeta HTML

 <Card className="card"> <CardTitle className="card-title"> <img className="item-image" src={icon} alt={alt}/> </CardTitle> <CardText className="card-text"> <div>Id: {id}</div> <div>Quantity to buy: {quan}</div> <div>Total Profit: {profit}</div> </CardText> </Card>

CSS

 .itemlist { background-color: rgb(211, 208, 208); position: relative; border: 2px solid red; width: 50%; height: 100%; float: left; display: flex; flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; } .card { display: flex; width: auto; height: auto; border: 2px solid black; background: green; margin: 0 10px; } .card-title { height: 100px; color: #fff; background: red; justify-content: center; align-items: center; } .item-image { width:auto; height:auto; }[enter image description here][1]