Html 如何将calc（）与最小内容一起使用？

我有一个网格布局，可以这样简化

我想要实现的是

。默认情况下，使用
mincontent
时，

端应该占用内容所需的任何空间，但是用户可以通过增加

--size

自定义css属性来扩大它

我尝试了

calc（min-content+var（--size））

但它不起作用。我不能像

calc（100px+var（--size））

那样指定特定的值，因为原始大小应该由其内容决定

实现此功能的最佳方法是什么

*{
框大小：边框框；
}
身体{
溢出：隐藏；
保证金：0；
}
.集装箱{
--尺寸：10px；
宽度：100vw；
高度：100vh；
显示：网格；
网格模板区域：
“l t”
“l b”；
/*不起作用*/
/*网格模板列：计算（最小内容+var（--size））1fr*/
网格模板列：最小内容1fr；
网格模板行：1fr 1fr；
}
.容器>*{
边框：实心1px黑色；
}
.这边{
网格面积：l；
}
.顶{
网格面积：t；
}
.底部{
网格面积：b；
}

右边应该有一个10px的排水沟
顶部
底部

对网格项使用

宽度：计算（100%+var（--size））

。这将产生溢出，您可以通过添加间隙来纠正：

*{
框大小：边框框；
}
身体{
溢出：隐藏；
保证金：0；
}
.集装箱{
--尺寸：20px；
高度：100vh；
显示：网格；
网格模板区域：
“l t”
“l b”；
/*不起作用*/
/*网格模板列：计算（最小内容+var（--size））1fr*/
网格模板列：最小内容1fr；
网格模板行：1fr 1fr；
列间距：var（--size）；
}
.容器>*{
边框：实心1px黑色；
}
.这边{
网格面积：l；
宽度：计算值（100%+var（--尺寸））；
}
.顶{
网格面积：t；
}
.底部{
网格面积：b；
}

右边应该有一个10px的排水沟
顶部
底部

对网格项使用

宽度：计算（100%+var（--size））

。这将产生溢出，您可以通过添加间隙来纠正：

*{
框大小：边框框；
}
身体{
溢出：隐藏；
保证金：0；
}
.集装箱{
--尺寸：20px；
高度：100vh；
显示：网格；
网格模板区域：
“l t”
“l b”；
/*不起作用*/
/*网格模板列：计算（最小内容+var（--size））1fr*/
网格模板列：最小内容1fr；
网格模板行：1fr 1fr；
列间距：var（--size）；
}
.容器>*{
边框：实心1px黑色；
}
.这边{
网格面积：l；
宽度：计算值（100%+var（--尺寸））；
}
.顶{
网格面积：t；
}
.底部{
网格面积：b；
}

右边应该有一个10px的排水沟
顶部
底部

为什么不直接使用填充呢。然后把它加到你的一边choose@a.mola因为内容不能在填充中…为什么不直接使用填充呢。然后把它加到你的一边choose@a.mola因为内容不能在里面填充…啊，我明白了，那很聪明，非常感谢！啊，我明白了，这很聪明，非常感谢！