HTML Flex item width changes with increase in number of items

Question

I was trying to make a scrollable(in X direction) flexbox container to display cards but as the number of cards increase the width of cards decrease but I want the cards to be of equal width even though it overflows the body. I tried this also Full width flex items but didn't worked please help me

boyd{
overflow:hidden}

.container {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: 100%;
}

.container .card {
    padding: 10px;
    border: 0.3px solid rgba(219, 214, 214, 0.801);
    border-radius: 5px;
    box-shadow: 1px 4px 8px 0px rgba(219, 214, 214, 0.801);
    width: 18rem;
}

.card-head {
    text-align: center;
}

.cardimg img {
    width: 95%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice Website</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="cardimg">
                <img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
            </div>
            <div class="card-head">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
            </div>
        </div>
        <div class="card">
            <div class="cardimg">
                <img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
            </div>
            <div class="card-head">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
            </div>
        </div>

        <div class="card">
            <div class="cardimg">
                <img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
            </div>
            <div class="card-head">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
            </div>
        </div>

        <div class="card">
            <div class="cardimg">
                <img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
            </div>
            <div class="card-head">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
            </div>
        </div>


        <div class="card">
            <div class="cardimg">
                <img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
            </div>
            <div class="card-head">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
            </div>
        </div>
    </div>
    <div class="mainbody">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque delectus excepturi quas, placeat voluptatibus quam similique magni in dicta eligendi ratione, amet quaerat debitis quo ipsum quasi. Numquam, eos veritatis?50
    </div>
    
</body>

</html>

score 0 · Accepted Answer · answered Aug 01 '21 at 12:37

0

Try this:

.container .card {
    flex-shrink: 0;
    /* ... */
}

flex-shrink docs: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

answered Aug 01 '21 at 12:37

starikcetin

1,391
1
16
24

Yes this worked for me thanks brother. I was wrong with container I was actually adding flex-shrik to container instead of item – Himanshu Singh Chauhan Aug 01 '21 at 12:43

HTML Flex item width changes with increase in number of items

1 Answers1