Html 反应灵敏的潜水艇相互叠放在一起

我想设置一个网页，如下图所示：

• 粉色框和白色框应保持在1350px的中心范围内
• 粉红色和白色框之间的距离可以是可变的，只要它保持在1350px的中心
• 当用户调整窗口大小时，黄色和蓝色框需要在垂直和水平方向上进行增长和收缩，以填充整个空间（1:2的比例）
• 粉红色框必须与黄色和蓝色边界重叠，蓝色框内约有10-20%的粉红色框
• 当分辨率>992px时，白色和粉色不应重叠，并且应保持它们之间的最小距离

我尝试过的事情（几乎奏效）

• 使用网格布局，我能够在1350px中心内正确地将粉色和白色项目隔开。但是，黄色和蓝色框也不超过1350px边界。（因为我正在设置最大宽度）

• 使用flexbox，我已经将它设置为黄色和蓝色水平/垂直拉伸的点。但是，我不知道如何将粉色和白色框限制在1350px的中心。有办法做到这一点吗

//我想加上最大宽度：1350px

标记和样式

.container{
显示器：flex；
弯曲方向：行反向；
高度：100vh；
宽度：100%；
}
黄先生{
背景颜色：金色；
最大宽度：33%；
填充顶部：70px；
弹性基准：33%；
柔性生长：1；
弹性收缩：1；
}
蓝先生{
背景色：天蓝色；
宽度：66%；
填充顶部：70px；
柔性生长：2；
弹性收缩：2；
}
怀特先生{
背景色：白色；
高度：400px；
宽度：300px；
右边距：自动；
左缘：20%；
/*左：0px*/
}
.粉红{
/*背景色：热粉红色*/
高度：400px；
宽度：500px；
左边距：自动；
右边距：-350px；
/*右：0px*/
}

---

这是一个CSS网格解决方案。我对黄色和蓝色使用伪元素，因为它们仅用于背景着色：

正文{
保证金：0；
高度：100vh；
显示：网格；
网格模板列：最大（（100vw-1350px）/20px）重复（81fr）最大（（100vw-1350px）/20px）；
}
正文>*，
body：：之前，
正文：：之后{
网格行：1；
}
身体：：之前{
内容：“；
背景：黄色；
格构柱：1/4跨；
}
正文：：之后{
内容：“；
背景：蓝色；
格构柱：跨度6/-1；
}
.粉红{
背景：粉红色；
格构柱：3/3跨；
身高：60%；
保证金：自动0；
z指数：1；
}
怀特先生{
背景：白色；
格构柱：7/2跨；
身高：40%；
保证金：自动0；
z指数：1；
}