Fit content property not working on shrinking the Viweport

Issue

#productofferingCards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border: 12px solid red;
    width: fit-content;
    margin: auto;

}



.productcards1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f9fafb;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    margin: 20px;
    width: fit-content;
}

<section id="productofferingCards">
    <div class="productcards1">
      <a href="">
       <img src="https://www.toppr.com/bytes/wp-content/uploads/2017/08/Better-Toppr-Logo-300x267.jpg" alt="logo"></a>
       <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/productLearnNew.png" alt="">
         <h2>Copmplete Learning app <br> for Schools and exams</h2>
         <p>class 5-12</p>
         <div>
           <p>Explore</p>
             <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/blueRightArrow.svg" alt="Arrow">
         </div>
    </div>
    <div class="productcards1">
      <a href="">
        <img src="https://www.toppr.com/bytes/wp-content/uploads/2017/08/Better-Toppr-Logo-300x267.jpg" alt="logo"></a>
        <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/productLearnNew.png" alt="">
        <h2>Copmplete Learning app <br> for Schools and exams</h2>
        <p>class 5-12</p>
          <div>
            <p>Explore</p>
            <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/blueRightArrow.svg" alt="Arrow">
          </div>
    </div>
            
</section>

Fit-content Works well in full size. But as soon as I Go below 920px, the container takes full available space. why?

ideally, #ProductofferingCards width should be equal to its container.

I was expecting the #productofferingCards to take space equal to its containers

Solution

I have added media query for best responsive view please check it:

#productofferingCards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      border: 12px solid red;
      width: fit-content;
      margin: auto;
    }



    .productcards1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #f9fafb;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      margin: 20px;
      width: fit-content;
    }

    @media (max-width:939px) {
      #productofferingCards {
        max-width: 100%;
        box-sizing: border-box;
      }

      .productcards1 {
        width: 100%;
      }
    }

<section id="productofferingCards">
    <div class="productcards1">

      <a href=""><img src="https://www.toppr.com/bytes/wp-content/uploads/2017/08/Better-Toppr-Logo-300x267.jpg"
          alt="logo"></a>
      <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/productLearnNew.png" alt="">
      <h2>Copmplete Learning app <br> for Schools and exams</h2>
      <p>class 5-12</p>
      <div>
        <p>Explore</p>
        <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/blueRightArrow.svg" alt="Arrow">
      </div>
    </div>
    <div class="productcards1">

      <a href=""><img src="https://www.toppr.com/bytes/wp-content/uploads/2017/08/Better-Toppr-Logo-300x267.jpg"
          alt="logo"></a>
      <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/productLearnNew.png" alt="">
      <h2>Copmplete Learning app <br> for Schools and exams</h2>
      <p>class 5-12</p>
      <div>
        <p>Explore</p>
        <img src="https://static-cf.toppr.com/marketing/6c448a3/images/home/blueRightArrow.svg" alt="Arrow">
      </div>
    </div>

  </section>

Answered By - Mahesh Prajapati