Html Question posted in
Some basic documentation can be found here.

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.
enter image description here

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Works now. I read about align-self property on https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-align-self and also gave the class a max height of 100%. Here is the working css:

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

.cart-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

  2. 0

    The .cart-product-row must have a set height for the child elements to be 100% of that height. Here’s my working example with what I understood you wanted (I added a border to the row to make it easier to see the result):

    .cart-product-row {
     border: 1px solid black;
     display: flex;
     height: 250px;
     align-items: center;
}
 .cart-product-quantity {
     flex: 0 1 10%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100%;
}
 .cart-product-detail {
     flex: 1 0 45%;
     display: flex;
     flex-direction: column;
     flex-grow: 0;
     height: 100%;
}
 .cart-product-image {
     flex: 0 1 45%;
     height: 100%;
}

.cart-product-image img {
  max-height: 100%;
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search