Css 增加容器对角线尺寸，保持内容物居中

嗨，我想做一个容器，其中包括一些盒子与人力资源和标题。容器中可以有很多盒子，我希望容器的大小沿对角线增加到最大值，然后滚动。我还想把箱子放在集装箱里。我只能将它们保持在一条直线上，我不能将盒子居中，并沿对角线增加容器大小。如何使用CSS实现这一点

html，正文{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}人力资源{
高度：1px；
边界：0；
保证金：5px0；
背景图像：-webkit线性渐变（向右，rgba（0,0,0,0），rgba（0,0,0,0.75），rgba（0,0,0,0,0））；
背景图像：-moz线性渐变（向右，rgba（0,0,0,0），rgba（0,0,0,0.75），rgba（0,0,0,0,0））；
背景图像：-ms线性渐变（向右，rgba（0,0,0,0），rgba（0,0,0,0.75），rgba（0,0,0,0,0））；
背景图像：-o线性梯度（向右，rgba（0,0,0,0），rgba（0,0,0,0.75），rgba（0,0,0,0,0））；
背景图像：线性渐变（向右，rgba（0,0,0,0），rgba（0,0,0,0.75），rgba（0,0,0,0,0））；
}容器{
最大高度：500px；
高度：自动；
最大宽度：500px；
宽度：自动；
显示：块；
字号：17.5px；
文本对齐：居中；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
边框：1px纯黑；
背景色：rgb（110170250）；
填充：10px；
位置：绝对位置；
最高：5%；
右：5%；
溢出：自动；
}盒子{
最小高度：100px；
最大高度：计算（100%-165px）；
高度：自动；
最小宽度：160px；
宽度：自动；
文本对齐：居中；
溢出-x：自动；
溢出y：隐藏；
空白：nowrap；
垫底：10px；
显示：块；
}盒子{
高度：75px；
宽度：150px；
显示：块；
背景色：红色；
保证金：5px；
光标：指针；
}

标题

我不确定我是否理解你的意图。像这样的

.container{
最大高度：500px；
最大宽度：500px；
字号：17.5px；
文本对齐：居中；
边界半径：5px；
边框：1px纯黑；
背景色：rgb（110170250）；
填充：10px 12px；
利润率：5%05%；
}
人力资源{
高度：1px；
边界：0；
利润率：5px14px；
背景图像：线性渐变（向右，rgba（0,0,0,0），rgba（0,0,0,0.75），rgba（0,0,0,0,0））；
}
.盒子{
最小高度：100px；
最大高度：计算（100%-165px）；
最小宽度：160px；
文本对齐：居中；
显示：网格；
栅隙：10px；
网格模板柱：1fr 1fr 1fr；
}
.盒子{
高度：75px；
背景色：红色；
光标：指针；
}

标题

是否希望所有框都是水平的？您希望得到什么输出？问题已编辑