CSS导航栏：扩展间隔区div以填充剩余宽度而不溢出：隐藏技巧

strong text似乎是一个常见的问题，但在我的案例中，它因一些额外的要求而变得复杂，因此我在so和MDN上的发现并没有引导我找到完整的解决方案

简单前提： 水平导航栏，页面全宽，半透明背景，标签数量可变（额外空间与标签背景相同）

简单，对吗？给容器元素

rgba

background，设置导航项目

display:inline

或

float

将它们放在左边，你就成了金色

并发症1：活动选项卡必须有一个三角形切口（见图）。

好的，我可以通过将背景图像设置为带有透明位的png来进行剪切。父元素的背景会妨碍您，因此请将背景设置为单个元素，而不是父元素

标签上方的可变宽度“空白”是什么（见图）？好的，放置一个大于寿命宽度的空元素，并在父元素上用

溢出：隐藏
将其切断

并发症2:

悬停按钮需要工具提示。
啊，太刺激了！悬念<代码>溢出：隐藏的
不起作用，除非我将工具提示全部放在导航div之外（这可能会起作用，但看起来很臭）


以下是我尝试过的几件事：

旧的实现没有“填充”元素宽度问题，但剪掉了半个工具提示（溢出：隐藏）：

处理
display:table
似乎无法控制
display:table单元格
div宽度的确定方式，还需要首先显示div的内容。内容可以移开，但仍然不好（甚至没有在此处添加工具提示）：

弄乱了浮动（工具提示排序，我希望它或多或少），但不知如何使最后一个“填充”元素适合剩余宽度：

所以问题是-我如何制作一个div来只用CSS填充剩余的宽度？或者我问的问题完全错了，在这种情况下，我会用什么想法来干净地实施它？

谢谢
 您介意使用flexbox布局的解决方案吗？不，这是一个内部工具，所以我可以指定支持哪种浏览器：）。然而，看着一本指南--我没有注意到一个明显的方法可以将它应用到我的情况中。。。