Display: Flex not adjusting flex items height with fluidity based on content inside the flex item

Question

I am trying to achieve the fluid height of the .flex-item containers according to the content pushed into them , beside also maintaining the display: flex behavior in it such that there is no whitespace left horizontally or vertically between the .flex-item and packing them beside each other in all the space provided.

As you run the code and observe the output i do not want to affect my second .flex-item due to the lengthy content in the first .flex-item, it should stick to the height of it's content and yet be aligned to other flex-items.

<!DOCTYPE html>
<head>
    <title>question</title>
    <style>
        body{
            display: flex;
            flex-wrap: wrap;
        }
        div.flex-item{
            width: 200px;
            text-align: center;
            background: linear-gradient(180deg, #eeeeee, #cccccc);
            border: 1px solid #efefef;
            margin: 12px;
        }
    </style>
</head>
<body>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
</body>

score 0 · Accepted Answer · answered Sep 11 '20 at 17:37

The align-items property set to flex-start will resolve this issue.

However, if you want the items lower items to fill out the empty space in the right column, you will need to use a Javascript library such as Masonry (https://masonry.desandro.com/).

<!DOCTYPE html>
<head>
    <title>question</title>
    <style>
        body{
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
        }
        div.flex-item{
            width: 200px;
            text-align: center;
            background: linear-gradient(180deg, #eeeeee, #cccccc);
            border: 1px solid #efefef;
            margin: 12px;
        }
    </style>
</head>
<body>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
<div class="flex-item">
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
    Lorem Ipsum dolor sit amet...
</div>
</body>

but i want to avoid these whitepaces which is occuring between second and fourth flex-item, i want third flex-item to wrap and come beside first flex item in the empty space — Ritika Gupta, Sep 11 '20 at 17:56
Unfortunately, that is not how Flexbox works. You will need to seek other options such as Masonry to handle that. — Jason, Sep 11 '20 at 18:47

Display: Flex not adjusting flex items height with fluidity based on content inside the flex item

1 Answers1