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.

CODEHTML

<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>

CSSI 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.