Am I facing overflow?

Question

The following code is for learning porpuses:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.class1{
    border: 1px solid green;
    display: flex;
    justify-content: center;
    height: 100vh;
}

.class2{
    border: 3px solid black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.class3{
    border: 1px solid red;
    height: 10vh;
    width: 10vw;
}

<div class='class1'>
            <div class='class2'>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
            </div>
        </div>

Questions:

Why the black rectangle doesn't contain all the red rectangles horizontally?
Why the bottom of the black rectangle doesn't end in the last red rectangle in that column? (I know why there is no room for an extra red rectangle - that's not the question).
How can I make the black rectangle cover all the red rectangles horizontally while keeping flex-direction: column; in class2? (without removing height: 100vh)

Note: The first two questions have more priority so please don't post an answer with only a code. it's useless.

Thank you!

Tân · Accepted Answer · 2018-11-23 08:10:14Z

Why the black rectangle doesn't contain all the red rectangles?

Because the element is using flex-wrap: wrap; with flex-direction: column;.

From the doc about using CSS flex-direction property with column option:

The flexible items are displayed vertically, as a column

Since the parent div doesn't provide height value enough to wrap all items, it will stop at that.

Why the bottom of the black rectangle doesn't end in the last red rectangle in that column?

That's 'cause of the parent div height. It's not enough.

How can I make the black rectangle cover all the red rectangles?

Removing height: 100vh; property from class1

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.class1{
    border: 1px solid green;
    display: flex;
    justify-content: center;
    /*height: 100vh;*/
}

.class2{
    border: 3px solid black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.class3{
    border: 1px solid red;
    height: 10vh;
    width: 10vw;
}

<div class='class1'>
            <div class='class2'>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
            </div>
        </div>

UPDATE 1:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.class1{
    border: 1px solid green;
    display: flex;
    justify-content: center;
    height: 167px;
}

.class2{
    border: 3px solid black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 201px;
    height: 166px;
}

.class3{
    border: 1px solid red;
    height: 10vh;
    width: 10vw;
}

<div class='class1'>
            <div class='class2'>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
            </div>
        </div>

UPDATE 2:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.class1{
    border: 1px solid green;
    display: flex;
    justify-content: center;
    height: 87px;
}

.class2{
    border: 3px solid black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 393px;
    height: 86px;
}

.class3{
    border: 1px solid red;
    height: 10vh;
    width: 10vw;
}

<div class='class1'>
            <div class='class2'>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
                <div class='class3'>1111</div>
            </div>
        </div>

1. Do you mean that flex-wrap: wrap; is only good for horizontal overflow? (I wanted to have the same effect when using flex-wrap: wrap; with flex-direction: row;). 2. I'm aware that there is no more room for an extra red rectangle. I asked - then why the black rectangle doesn't end before? I didn't provide height so the value of the height can be dynamic. 3. I asked how to solve it when there is a height: 100vh. ----- Maybe I wasn't clear. I updated my question.
@StavAlfi You need to provide the value width and height of class class2 while using flex-direction (both column and row).
Thanks for the response. np, I will define height but I want the width to be dynamic because I don't know how many red rectangles I will have.
Ahh, if you use it with option column, you can leave the height value. Otherwise, if you use it with row option, you can leave the width value. We set both of the values to fit the content on your site

Collectives™ on Stack Overflow

Am I facing overflow?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related