Trying to create dynamic react-mdl cards with specific height and widths. The problem is coming from a float being longer than the width of the card it is in. How can I fix the float or containers to allow cards equally spaced and dynamically sized on each row.

Here is the current code for the container and card 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]