CSS Flex布局下如何让固定尺寸子元素按顺序自动填充容器空间

现有HTML结构中，class为.page的div作为子组件排布容器，容器内子组件尺寸统一，排布要求为：第一个子组件排在首位，后续子元素优先填充横向剩余空间，横向空间不足时自动换行到上方左侧元素下方。

• 预期排布效果：
  
• 当前实际排布效果：
  

现有代码如下：
.page容器样式：

.page {
  display: flex;
  width: 26.4cm;
  height: 37cm;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
}

子元素Grid样式：

.displayGridSlip {
  display: grid;
  width: 13cm;
  grid-template-columns: 13cm;
  grid-template-rows: 1.7cm 4.9cm 0.5cm;
  grid-template-areas:
    "h"
    "b"
    "f";
  border-bottom-style: dashed;
  border-bottom-width: 0.3mm;
  border-right-style: dashed;
  border-right-width: 0.3mm;
  padding-top: 0.2cm;
}

Angular模板代码：

<div *ngFor="let itemCapa of arraySlips.capa; let k = index;">
    <div class="page">
        <app-slip-capa [itemCapa]="itemCapa"></app-slip-capa>
        <app-slip-conteudo [item]="arraySlips.info" [itemCapa]="itemCapa"></app-slip-conteudo>
    </div>
</div>

• 模板结构错误：当前*ngFor绑定在最外层容器上，每次遍历都会生成独立的.page flex容器，每个容器内仅包含2个子组件，所有子组件无法在同一个容器内统一按规则排布。
• 宽度计算溢出：默认盒模型为content-box，子组件.displayGridSlip设置width:13cm的同时配置了0.3mm的右边框，两个子组件并排时实际占用总宽度为26.43cm，超出.page容器26.4cm的宽度，导致同行元素被挤到下一行。

1. 统一盒模型，修复宽度计算问题
   全局设置box-sizing: border-box，让元素设置的width值包含padding、border尺寸，从根源避免宽度溢出。同时如果第一个子组件（capa）需要占据整行首位，给其设置100%宽度：

*, *::before, *::after {
  box-sizing: border-box;
}
.page {
  display: flex;
  width: 26.4cm;
  height: 37cm;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
}
/* 首个capa组件占满整行 */
app-slip-capa {
  width: 100%;
}
.displayGridSlip {
  display: grid;
  width: 13cm;
  grid-template-columns: 13cm;
  grid-template-rows: 1.7cm 4.9cm 0.5cm;
  grid-template-areas:
    "h"
    "b"
    "f";
  border-bottom-style: dashed;
  border-bottom-width: 0.3mm;
  border-right-style: dashed;
  border-right-width: 0.3mm;
  padding-top: 0.2cm;
}
/* 偶数位子组件去掉右边框，刚好两列撑满容器宽度 */
.displayGridSlip:nth-child(2n) {
  border-right: none;
}

2. 调整Angular模板结构
   将.page容器移到循环外层，保证所有需要排布的子组件都在同一个flex容器内。按「第一个子组件排首位，后续子元素优先填充横向」的要求，模板调整如下：

<div class="page">
  <!-- 首位子组件：capa 占整行 -->
  <app-slip-capa [itemCapa]="arraySlips.capa[0]"></app-slip-capa>
  <!-- 后续子组件：自动按两列换行排布 -->
  <app-slip-conteudo
    *ngFor="let itemCapa of arraySlips.capa.slice(1)"
    [item]="arraySlips.info"
    [itemCapa]="itemCapa">
  </app-slip-conteudo>
</div>

如果业务逻辑是每个capa对应一组conteudo需要单独分页，只需要保留循环生成.page的结构，但要确保每个.page内的子组件宽度计算正确，且给每个.page内的首个capa设置全宽即可。

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