Понимание размера элемента строки в CSS flexbox ⇐ CSS

[Anonymous]

Я изучаю CSS flexbox. Я создал макет, показанный ниже. Зелёный прямоугольник — это элемент flexbox в макете строки flexbox. Мне трудно понять, почему этот зеленый прямоугольник не заполняет все пространство справа от окна браузера.
Макет макета
Почему что? Я ищу объяснение, а не простое решение (Я пытался найти ответ в веб-документах mdn. Я уверен, что он где-то есть, но мне не удалось его найти.)< /p>
Вот работоспособный фрагмент:

Код: Выделить всё

.page {
min-height: 100vh;
}

.flex-row {
display: flex;
}

.flex-col {
display: flex;
flex-direction: column;
-ms-flex-direction: column;
}

.flex-wrap {
flex-wrap: wrap;
-ms-flex-wrap: wrap;
}

.align-items-center {
align-items: center;
}

.m-10 {
margin: 10px;
}

.h-40 {
height: 40px;
}

.h-100 {
height: 100px;
}

.w-100 {
width: 100px;
}

.w-200 {
width: 200px;
}

.w-800 {
width: 800px;
}

.bg-lightblue {
background-color: lightblue;
}

.bg-aqua {
background-color: aqua;
}

.bg-lightgreen {
background-color: lightgreen;
}

.bg-crimson {
background-color: crimson;
}

.bg-lightgray {
background-color: lightgray;
}

.bg-darkgray {
background-color: darkgrey;
}

Код: Выделить всё

Navbar top


Navbar left



A
B
A
B
A
B
A
B
A
B
A
B



footer

Подробнее здесь: https://stackoverflow.com/questions/785 ... ss-flexbox