Html Flexbox，嵌套网格/子网格 期望输出

我正在尝试实现嵌套的Flexbox布局

我想让第二列和第三列中的子项在父项上采用全尺寸

当第一列的depth=1时，它工作，但当我添加Flex容器时失败

我对错误的看法 我被迫将

flex:1

和

display:flex

组合在一起，以便使用相同的类，而不管它是用作容器还是项目

有什么想法吗

实际代码

。网格拉伸{
显示器：flex；
对齐项目：拉伸；
背景色：黄色；/*用于跟踪错误*/
}
.以儿童为中心{
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：绿色；/*用于跟踪错误*/
}
html，
身体{
身高：100%；
}
身体{
保证金：0；
溢出包装：中断工作；
}
.根{
最大宽度：1200px；
身高：100%；
}
标题{
最小高度：80px；
/*在页眉内部而不是其边缘设置实心边框*/
框大小：边框框；
底部边框：3倍纯黑；
}
/*深度1*/
标题导航：第n个子项（1）{
弹性：3；
背景颜色：蓝色；
}
标题导航：第n个子项（2）{
弹性：5；
背景色：白色；
}
标题导航：第n个子项（3）{
弹性：2；
背景色：红色；
}
/*深度2*/
收割台导航：第n个子（2）分区{
背景颜色：橙色；
}
收割台导航：第n个子（3）分区{
背景颜色：橙色；
}

链接
链接
链接
链接
链接
链接
链接

按如下方式更新您的代码：

。网格拉伸{
显示器：flex；
对齐项目：拉伸；
背景色：黄色；/*用于跟踪错误*/
}
.以儿童为中心{
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
背景色：绿色；/*用于跟踪错误*/
}
/*增加*/
.flex{
显示器：flex；
}
.flex*{
柔性生长：1；
}
/**/
html，
身体{
身高：100%；
}
身体{
保证金：0；
溢出包装：中断工作；
}
.根{
最大宽度：1200px；
身高：100%；
}
标题{
最小高度：80px；
/*在页眉内部而不是其边缘设置实心边框*/
框大小：边框框；
底部边框：3倍纯黑；
}
/*深度1*/
标题导航：第n个子项（1）{
弹性：3；
背景颜色：蓝色；
}
标题导航：第n个子项（2）{
弹性：5；
背景色：白色；
}
标题导航：第n个子项（3）{
弹性：2；
背景色：红色；
}
/*深度2*/
收割台导航：第n个子（2）分区{
背景颜色：橙色；
}
收割台导航：第n个子（3）分区{
背景颜色：橙色；
}

链接
链接
链接
链接
链接
链接
链接

只需删除对齐项目：居中；from nav（only nav）@TemaniAfif谢谢你的回答，但它不起作用。它起作用了：这不是我要找的，链接应该占据全部可用的垂直和水平空间，自由空间平均分割。只要有橙色/黄色/绿色背景，结果就不是我所期望的。