CSS Flexbox行项目尺寸疑问：绿色盒子为何未占满浏览器右侧空间

问题：Flexbox布局中绿色盒子无法占满浏览器右侧空间的原理性解释 #

我正在学习CSS Flexbox，制作了对应的原型布局，其中绿色盒子是Flexbox行布局里的一个flex项目，但我搞不懂为什么它没法占满浏览器窗口的右侧空间。我需要原理性的解释，不要快速修复方案（我已经在MDN Web Docs里找过，没找到答案）。

可运行代码片段 #

CSS 代码

.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;
}

HTML 代码

<body>
  <div class="">
    <div class="navbar-top h-40 bg-lightgray">Navbar top</div>
    <div class="page flex-row bg-darkgray">
      <!-- first element in row-->
      <div class="navbar-left w-200 bg-aqua">Navbar left</div>
      <!--second elemen in row (much longer than first)-->
      <div class="content w-800">
        <div class=" flex-col align-items-center bg-lightgreen">
          <div class="box bg-lightgray w-100 h-100 m-10">A</div>
          <div class="box bg-lightgray w-100 h-100 m-10">B</div>
          <div class="box bg-lightgray w-100 h-100 m-10">A</div>
          <div class="box bg-lightgray w-100 h-100 m-10">B</div>
          <div class="box bg-lightgray w-100 h-100 m-10">A</div>
          <div class="box bg-lightgray w-100 h-100 m-10">B</div>
          <div class="box bg-lightgray w-100 h-100 m-10">A</div>
          <div class="box bg-lightgray w-100 h-100 m-10">B</div>
          <div class="box bg-lightgray w-100 h-100 m-10">A</div>
          <div class="box bg-lightgray w-100 h-100 m-10">B</div>
          <div class="box bg-lightgray w-100 h-100 m-10">A</div>
          <div class="box bg-lightgray w-100 h-100 m-10">B</div>
        </div>
      </div>
    </div>
    <div class="footer h-40 bg-crimson">footer</div>
  </div>
</body>

内容的提问来源于stack exchange，提问作者Sebastian