如何仅用CSS在响应式Flexbox页面中最大化Tooltip宽度且不溢出

我的网页采用Flex布局，nav内容及.tooltipcontainer后的内容宽度均为动态值，无法通过CSS计算.tooltipcontainer右侧剩余页面宽度。核心需求：

• 不扩展页面宽度的前提下最大化Tooltip宽度（Tooltip内文本较长）
• 实现方案无需JavaScript，且需具备CSS降级方案，确保JS失效时页面仍可正常使用

已尝试的无效方案 #

• Tooltip需置于.tooltipcontainer内以实现相对左侧定位，但此时宽度只能相对于.tooltipcontainer或设为绝对宽度，而绝对定位因nav宽度未知不可行
• 无法通过calc()引用其他元素实际宽度来计算Tooltip宽度
• 设置width: max-content会导致页面宽度被撑开，且滚动时鼠标易移出Hover区域导致Tooltip消失
• 目前无max-right属性可限制Tooltip右边界

当前折中方案 #

设置Tooltip宽度为60vw，main最小宽度为65vw，但这会破坏动态布局，仅能保证内容可访问

补充说明 #

• Tooltip与.tooltipcontainer的位置不可分离，不接受将Tooltip置于屏幕底部等远离触发元素的方案
• 已尝试另一种方案，但该方案无法支持多行流式文本，希望能得到通用扩展方案

接受纯CSS可行解决方案，或确认该问题无纯CSS可行方案的答复

内容的提问来源于stack exchange，提问作者RSE