Css 有没有办法用设定的高度收缩元素？

所以我不知道该问什么问题，但听我说完。 我试图制作一个div包装器（图片中有一个bisque背景），它的工作原理如下：

现在，上面的布局使用固定高度来使用网格划分包装。因此，如果我删除一些项目是我得到的

即使包装有固定的高度，是否有办法将其收缩到其内容？或者，是否可以在不设置高度的情况下归档相同的结果

此外，这也是使用“最大高度”时的情况：

它的工作方式正是我想要的，只需一个简单的。但是如果溢出，我需要它来显示滚动条。所以我在寻找两者的结合

对于那些想知道我为什么要使用网格的人。Flex也有同样的问题，还有一些问题

.wrapper{
显示：网格；
网格模板行：重复（最大内容，4）；
调整内容：灵活启动；
保证金：0自动；
宽度：80vh；
高度：80vh；
背景色：深蓝色；
填充：10px；
}
.标题{
背景色：深黄色；
填充：10px；
利润率：10px0；
}
.名单{
背景颜色：珊瑚；
填充：10px；
溢出y：自动；
}
.项目{
背景色：暗绿色；
颜色：白色；
边框：1px纯色灰色；
}

文件
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.

您需要使用最大高度和栅格自动行，而不是高度和栅格模板行：

可能的例子

注意：这使得每个列表的高度相等（更接近您的要求），可能需要javascript在某些点重置行高度

.wrapper{
显示：网格；
/*新建/更新*/网格自动行：自动最小最大值（自动，1fr）；/*生成2行的重复模式*/
调整内容：灵活启动；
保证金：0自动；
宽度：80vh；
/*新建/更新*/最大高度：80vh；
溢出：隐藏；
背景色：深蓝色；
填充：10px；
}
.标题{
背景色：深黄色；
填充：10px；
利润率：10px0；
}
.名单{
背景颜色：珊瑚；
填充：10px；
溢出y：自动；
}
.项目{
背景色：暗绿色；
颜色：白色；
边框：1px纯色灰色；
}

1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.

您需要使用最大高度和栅格自动行，而不是高度和栅格模板行：

可能的例子

注意：这使得每个列表的高度相等（更接近您的要求），可能需要javascript在某些点重置行高度

.wrapper{
显示：网格；
/*新建/更新*/网格自动行：自动最小最大值（自动，1fr）；/*生成2行的重复模式*/
调整内容：灵活启动；
保证金：0自动；
宽度：80vh；
/*新建/更新*/最大高度：80vh；
溢出：隐藏；
背景色：深蓝色；
填充：10px；
}
.标题{
背景色：深黄色；
填充：10px；
利润率：10px0；
}
.名单{
背景颜色：珊瑚；
填充：10px；
溢出y：自动；
}
.项目{
背景色：暗绿色；
颜色：白色；
边框：1px纯色灰色；
}

1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.
1.
2.
3.
4.

这就是我使用js时想到的。我从一开始就不打算用它。 但是，由于唯一的建议使用它，我也决定尝试

它非常灵活，尽管您需要在js中设置元素的最大高度和填充总数

函数pxToVH（px，padding=0）{
返回（px-填充）*（100/document.documentElement.clientHeight）；
}
const wrapper=document.querySelector（'.wrapper'）；
//如果包装高度超过80vh，则将高度设置为80vh，否则将高度设置为自动
wrapper.style.height=pxToVH（wrapper.scrollHeight，20）>80？“80vh'：“自动”
.wrapper{
显示：网格；
网格模板行：重复（自动，4）；
行间距：10px；
背景色：深蓝色；
宽度：80vh；
保证金：0自动；
填充：10px；
}
.标题{
背景色：深黄色；
填充：10px；
}
.名单{
背景颜色：珊瑚；
填充：10px；
溢出y：自动；
}
.项目{
背景色：暗绿色；
颜色：白色；
边框：1px纯色灰色；
}

1.
2.
3.
4.
1.
2.
3.
4.
这就是我使用js时想到的。我从一开始就不打算用它。
但是，由于唯一的建议使用它，我也决定尝试

它非常灵活，尽管您需要在js中设置元素的最大高度和填充总数


函数pxToVH（px，padding=0）{
返回（px-填充）*（100/document.documentElement.clientHeight）；
}
const wrapper=document.querySelector（'.wrapper'）；
//如果包装高度超过80vh，则将高度设置为80vh，否则将高度设置为自动
wrapper.style.height=pxToVH（wrapper.scrollHeight，20）>80？“80vh'：“自动”
.wrapper{
显示：网格；
网格模板行：重复（自动，4）；
行间距：10px；
背景色：深蓝色；
宽度：80vh；
保证金：0自动；
填充：10px；
}
.标题{
背景色：深黄色；
填充：10px；
}
.名单{
背景颜色：珊瑚；
填充：10px；
溢出y：自动；
}
.项目{
背景色：暗绿色；
颜色：白色；
边框：1px纯色灰色；
}

1.
2.
3.
4.
1.
2.
3.
4.
为什么不使用最大高度而不是最大高度height@Pete网格依赖于高度来划分容器。因此，使用“最大高度”不会触发溢出属性。如果在包装上使用“隐藏溢出”，它将超出边界或被剪切。为什么不使用“最大高度”而不是“最大高度”height@Pete网格关系