title: Flex box items width basing off of parent container width
body: <p>I have a parent container that has a max width and I want there to be 3 boxes to a line. I am using flex for this but I want the boxes to take up the full width of the parent container which I am only able to achieve by hard-coding the width of the boxes.  How can I have them adapt to the width of the sections container rather than me putting a 32% width on the boxes?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="account-component&gt;
     &lt;div class="cart-products-container"&gt;
        &lt;div class="sections"&gt;
              &lt;div class="cart-product"&gt;
              &lt;/div&gt;
              &lt;div class="cart-product"&gt;
              &lt;/div&gt;
              &lt;div class="cart-product"&gt;
              &lt;/div&gt;
              &lt;div class="cart-product"&gt;
              &lt;/div&gt;
              &lt;div class="cart-product"&gt;
              &lt;/div&gt;
              &lt;div class="cart-product"&gt;
              &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.account-component {
      max-width: 1240px;
      text-align: center;
      margin: 0 auto;
      display: flex;
      margin-top: 100px;
      .sections {
          display: flex;
          flex-wrap: wrap;
  
          .cart-product {
               width: 32%;
               margin-bottom: 25px;
               height: 445px;
               background-color: pink;
               &amp;:nth-child(3n+2) {
                  margin-right: 24px;
                  margin-left: 24px;
               }
          }
  
      }
  }
  </code></pre>