Html 如何使这个div完全自动大小？

我正在尝试制作一份餐厅菜单，但我不知道怎么做，我想让名为“菜单间隔”的div最大化

“最小宽度”和“最大宽度”仅取最小宽度

渲染屏幕截图：

联合国菜单兜售事实正常
50€
联合国菜单
50€

.wrapper{
显示器：flex；
}
.菜单内容{
宽度：；
}
.菜单间隔符{
宽度：最大含量；
边框底部：绿色2件，带点；
}
.菜单{
宽度：80%；
文本对齐：左对齐；
颜色：黑色；
垫底：0px；
}
.价格{
宽度：最小含量；
文本对齐：右对齐；
颜色：黑色；
}

我认为这里的秘密在于了解

vw

和

vh

，你可以在这里研究：

看小提琴：

.wrapper{
显示器：flex；
}
.菜单内容{
宽度：；
}
.菜单间隔符{
宽度：100vw；
边框底部：绿色2件，带点；
}
.菜单{
宽度：80%；
文本对齐：左对齐；
颜色：黑色；
垫底：0px；
}
.价格{
宽度：最小含量；
文本对齐：右对齐；
颜色：黑色；
}

联合国菜单兜售事实正常
50€
联合国菜单
50€

我试过类似的方法，但我不想让它像它所显示的那样断线。你是说断线吗？发生了什么你不想发生的事？让我知道，我会尽量给你一个更好的答案。