CSS Issue with a button placement in a container-CodePudding

I am currently making a practise eCommerce website and I have encountered a problem with my styling, I can't figure out how to attach the button to the very bottom of the product container so that other items don't overstretch. I would ideally like the containers to stretch and balance out the content to the length of the longest item.

Here is a picture of the issue
CSS:

.card-container {
    max-width: 80%;
    width:  80%;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 500px;
}

.product-name {
    font-size: 130%;
    font-weight: bold;
    color: black;
}

.image-container {
    width: 80%;
    height: 250px;
}

.description {
    padding: 0 20px;
}

.link {
    text-decoration: none;
}

.item-info {
    line-height: 200%;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: 2em auto;
    text-align: center;
    font-family: arial;
    width: 100%;
    min-width: 300px;
}

.card img {
    max-width: 250px;
    max-height: 200px;
}

.price {
    font-size: 22px;
}

.card button {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
}

.card button:hover {
    opacity: 0.7;
}

JSX:

import './Home.css'
import { Link } from 'react-router-dom';
import { useState, useEffect } from 'react';
import fetchItems from '../../utils/fetchItems';

export const Home = () => {
    const [ products, setProducts ]= useState([]);

    useEffect(() => {
        (async () => {
            const response = await fetchItems('/products');
            setProducts(response);
        })()
    }, []);    

    return(
        <div>
            <h1>Welcome to Sahara</h1>
            <div className='card-container'>
                {products.map(product => {
                    return(
                            <div className="card">
                                <img src={product.image} alt='product' />
                                <div className='item-info'>
                                    <Link to={`/products/${product.id}`} className='link'><h4 className='product-name'>{product.name}</h4></Link>
                                    <p className='seller'>{product.seller}</p>
                                    <p className='price'>${product.price}</p>
                                    <Link to='/cart'><button>Add to Cart</button></Link>
                                </div>
                                
                            </div>
                    )
                })}  
            </div> 
        </div>
    )
}

Any help would be greatly appreciated. Thank you.

CodePudding user response：

An easy way to do this would be to have the the .card position: relative; and the .card button be set to position: absolute; Something similar to the below:

.card {
  position: relative;
}

.card button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

CodePudding user response：

You could use position: absolute; to align the button to the bottom. Add these values to the stylesheet:

.card {
    position: relative;
}

.card button {
    position: absolute;
    bottom: 0;
    right: 0;
}

See this question for more information.

CodePudding user response：

.card {
  position: relative;
}

.card button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}