Я сталкиваюсь с переполнением?

Question

Следующий код предназначен для изучения 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>

Вопросы:

1. Почему черный прямоугольник не содержит всекрасные прямоугольники по горизонтали?
2. Почему нижняя часть черного прямоугольника не заканчивается последним красным прямоугольником в этом столбце?(Я знаю, почему нет места для дополнительного красного прямоугольника - это не вопрос).
3. Как можно ли сделать черный прямоугольник покрывающим все красные прямоугольникигоризонтально при сохранении flex-direction: column; в class2?(без удаления height: 100vh)

Примечание: Первые два вопроса имеют больший приоритет, поэтому не оставляйте ответ только с кодом.это бесполезно.

Спасибо!

Answer 1

Почему черный прямоугольник не содержит всех красных прямоугольников?

Поскольку элемент использует flex-wrap: wrap; с flex-direction: column;.

С документ об использовании свойства flex-direction CSS с опцией столбца :

Гибкие элементы отображаются вертикально, как столбец

Поскольку родительский div не имеетheight значение достаточно , чтобы обернуть все элементы, на этом все остановится.

Почему нижняя часть черного прямоугольника не заканчивается в последнем красном прямоугольникев этом столбце?

Это причина родительской высоты div.Этого недостаточно .

Как сделать так, чтобы черный прямоугольник покрывал все красные прямоугольники?

Удаление свойства height: 100vh; из 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>

---

ОБНОВЛЕНИЕ 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>

---

ОБНОВЛЕНИЕ 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>