Html – Why is flex item not taking up the whole parent height?

My goal is to make a cart. That displays items with it’s attributes, name, picture etc.

I got the layout as I desired. However the cart-product-quantity won’t take up the whole height. I could set the .cart-product-row to relative and then .cart-product-quantity to absolute. That worked but I don’t think that’s the most effective way of doing it. I want the image and quantity changer to take up the whole height.

CODE
HTML

<div class="cart-header"><span class="cart-title">My Bag</span><span class="cart-comma">, </span><span class="cart-item-count">1 item</span></div>
<div class="cart-product">
   <div class="cart-product-row">
      <div class="cart-product-detail">
         <h4 class="cart-product-title">Nike Air Huarache Le</h4>
         <div class="cart-product-price">
            <p class="cart-product-detail-price">$144.69</p>
         </div>
         <div class="attribute">
            <p class="attribute-id">SIZE:</p>
            <div class="cart-text-attribute">
               <div class="cart-attribute-item 
                  cart-text-item" title="40">40</div>
               <div class="cart-attribute-item 
                  active 
                  cart-text-item" title="41">41</div>
               <div class="cart-attribute-item 
                  cart-text-item" title="42">42</div>
               <div class="cart-attribute-item 
                  cart-text-item" title="43">43</div>
            </div>
         </div>
      </div>
      <div class="cart-product-quantity"><button class="cart-product-button increase">+</button><span>1</span><button class="cart-product-button decrease">-</button></div>
      <div class="cart-product-image"><img src="https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_2_720x.jpg?v=1612816087" alt="Nike Air Huarache Le"></div>
   </div>
</div>
<div class="cart-price">
   <p class="cart-total">Total</p>
   <p class="cart-total-price">$144.69</p>
</div>
<button class="cart-place-order">PLACE ORDER</button>

CSS
I wont include the whole css only the cart-product-row.

 .cart-product-row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     height: 100%;
     align-items: center;
}
 .cart-product-quantity {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     align-content: space-between;
     height: 100%;
}
 .cart-product-detail {
     flex: 2;
     display: flex;
     flex-direction: column;
     flex-grow: 0;
}
 .cart-product-image {
     flex: 2;
}

When I try to use flex-grow on one of the cart-product-row flexbox items (cart-product-quantity) it grows only in width :/. This is probably because I set the direction to row. I don’t know how to make the buttons be spaced out evenly trough the whole height. It would be nice that the picture would take up the whole space but I need to understand how to make cart-product-quantity class to take up the whole height.

Any help would be nice, been sitting at this problem for couple of hours. If you need more information let me know.