flex-wrap not working with min-width and max-width-CodePudding

I want to create a responsive product card with flex-box and flex-wrapper using min-width and max-width. However, the min and max isn't working with flex-wrap.
The flex-wrapper does wrap it but the width remains fix and it's not responsive like how I want it to be. Here's the code I've written:

     .product-container{
        display: flex;
        gap: 1rem;
        padding: 1rem;
        flex-wrap: wrap;
        }
        .product-wrapper{
            padding: 10px;
            box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
            width: 100%;
            min-width: 10rem;
            max-width: 15rem;
        }
        .product-wrapper a{
            text-decoration: none;
        }
        .product{
            width: 100%;
        }
        .product img{
            width: 100%;
        }
        .price{
            display: flex;
            gap: 1rem;
        }

<div >
        <div >
            <a href="#">
                <div >
                    <img src="images/product.jpg" alt="">
                    <h2>Product Name</h2>
                    <div >
                        <p>$ 22</p>
                        <p>$ 9</p>
                    </div>
                </div>
            </a>
        </div>
        <div >
            <a href="#">
                <div >
                    <img src="images/product.jpg" alt="">
                    <h2>Product Name</h2>
                    <div >
                        <p>$ 22</p>
                        <p>$ 9</p>
                    </div>
                </div>
            </a>
        </div><div >
            <a href="#">
                <div >
                    <img src="images/product.jpg" alt="">
                    <h2>Product Name</h2>
                    <div >
                        <p>$ 22</p>
                        <p>$ 9</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

CodePudding user response：

Remove the width:100%; :

.product-container{
        display: flex;
        gap: 1rem;
        padding: 1rem;
        flex-wrap: wrap;
        }
        .product-wrapper{
            padding: 10px;
            box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
            min-width: 10rem;
            max-width: 15rem;
        }
        .product-wrapper a{
            text-decoration: none;
        }
        .product{
            width: 100%;
        }
        .product img{
            width: 100%;
        }
        .price{
            display: flex;
            gap: 1rem;
        }

<div >
        <div >
            <a href="#">
                <div >
                    <img src="images/product.jpg" alt="">
                    <h2>Product Name</h2>
                    <div >
                        <p>$ 22</p>
                        <p>$ 9</p>
                    </div>
                </div>
            </a>
        </div>
        <div >
            <a href="#">
                <div >
                    <img src="images/product.jpg" alt="">
                    <h2>Product Nameee</h2>
                    <div >
                        <p>$ 22</p>
                        <p>$ 9</p>
                    </div>
                </div>
            </a>
        </div><div >
            <a href="#">
                <div >
                    <img src="images/product.jpg" alt="">
                    <h2>Product Nameeeee</h2>
                    <div >
                        <p>$ 22</p>
                        <p>$ 9</p>
                    </div>
                </div>
            </a>
        </div>
    </div>

CodePudding user response：

.product-container {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  flex-wrap: wrap;
}

.product-wrapper {
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  min-width: 10rem;
  max-width: 15rem;
}

.product-wrapper a {
  text-decoration: none;
}

.product {
  width: 100%;
}

.product img {
  width: 100%;
}

.price {
  display: flex;
  gap: 1rem;
}

<div >
  <div >
    <a href="#">
      <div >
        <img src="images/product.jpg" alt="">
        <h2>Product Name</h2>
        <div >
          <p>$ 22</p>
          <p>$ 9</p>
        </div>
      </div>
    </a>
  </div>
  <div >
    <a href="#">
      <div >
        <img src="images/product.jpg" alt="">
        <h2>Product Name</h2>
        <div >
          <p>$ 22</p>
          <p>$ 9</p>
        </div>
      </div>
    </a>
  </div>
  <div >
    <a href="#">
      <div >
        <img src="images/product.jpg" alt="">
        <h2>Product Name</h2>
        <div >
          <p>$ 22</p>
          <p>$ 9</p>
        </div>
      </div>
    </a>
  </div>
</div>