Objects going out of border with flex property-CodePudding

Using css flex property, the element stick together either and go out of the border. I have tried using justify-content: space-around; but it made things just worse. I have given the property to the parent element with a class called cards-main and it also is in another element with an id main. (Note: in the code attached there is just one element so that the question won't get closed.).

.car{
    position: relative;
    height: 385px;
    width: 220px;
    background-color: whitesmoke;
    margin-left: 20px;
    border-radius: 10%;
}

#cards_main{
    position: relative;
    display: flex;
    width: 3;
    height: max-content;
    margin-left: 10px;
    text-align: center;
    padding-top: 10px;
}

<div id="main">
    <div id="cards_main">
        <div >
            <img src="..."
                alt="">
            <h3>Helios</h3>
            <hr>
            <h5 >Price: $2000</h5>
            <h5 >Conditon: New</h5>
            <h5 >Phone number: 050-367-81-21</h5>
            <button >Add </button>
        </div>
    </div>
</div>

CodePudding user response：

Add a style for your image inside car class to make the image responsive.

.car img{
   width: 100%;
   height: auto;
}

CodePudding user response：

My goal was achieved after using the flex-wrap: wrap; property.