Ширина элементов флексбокса исходя из ширины родительского контейнера

Question

У меня есть родительский контейнер, который имеет максимальную ширину, и я хочу, чтобы в строке было 3 поля. Я использую flex для этого, но я хочу, чтобы ящики занимали всю ширину родительского контейнера, чего я могу добиться только путем жесткого кодирования ширины ящиков. Как я могу сделать так, чтобы они приспосабливались к ширине контейнера сечениями, а не к ширине 32% на полях?

HTML

<div class="account-component>
   <div class="cart-products-container">
      <div class="sections">
            <div class="cart-product">
            </div>
            <div class="cart-product">
            </div>
            <div class="cart-product">
            </div>
            <div class="cart-product">
            </div>
            <div class="cart-product">
            </div>
            <div class="cart-product">
            </div>
      </div>
   </div>
</div>

CSS

.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;
             &:nth-child(3n+2) {
                margin-right: 24px;
                margin-left: 24px;
             }
        }

    }
}

Answer 1

Чтобы получить желаемый эффект, вам просто нужно изменить:

.cart-product {
   flex: 0 0 33%;
   margin-bottom: 25px;
   height: 445px;
   background-color: pink;
}

Answer 2

Вы не можете использовать процент для дочернего элемента, если вы не установили width (не max-with) родительского элемента, потому что у вас не будет ширины, от которой зависит.

InВ вашем случае используйте flex, чтобы установить процентное соотношение дочерних элементов.

Вот примерная скрипка: https://jsfiddle.net/gadawag/0by7dm81/6/