Css 将具有百分比（%）宽度的div设置为其最大内容的最小宽度

我试图构建一个随页面宽度增长的侧菜单，但收缩时不会折叠到菜单的任何内容中

现在我可以使用

最小宽度：

，以及一些静态像素数来防止菜单崩溃，但是由于菜单的内容可能会有所不同，我希望菜单始终具有最大元素的最小宽度

这可以通过javascript实现，但是有没有一个优雅的CSS解决方案

这是一支带有示例的笔，您可以滑动编辑器窗口以折叠菜单：

基本元素结构：

html，正文{
身高：100%；
}
.集装箱{
位置：固定；
排名：0；
左：0；
宽度：30%；
身高：100%；
背景：rgba（255,0,0,0.4）；
}

变数
宽度
内容
不要折叠长文本

您可以使用CSS网格来模拟这种行为

html，正文{
身高：100%；
保证金：0；
}
.集装箱{
位置：固定；
显示：网格；
排名：0；
左：0；
网格模板列：minmax（最大内容，30vw）；
身高：100%；
背景：rgba（255,0,0,0.4）；
}

变数
宽度
内容
不要折叠长文本

也包括flexbox

html，
身体{
身高：100%；
}
.集装箱{
位置：固定；
排名：0；
左：0；
最小宽度：30vw；
显示器：flex；
身高：100%；
背景：rgba（255,0,0,0.4）；
}

变数
宽度
内容
不要折叠长文本

谢谢，这适用于

最大宽度

，我忘了在我的问题中包括它