Javascript 如何在宽度百分比很小的线段之间渲染1px的边沟？

我正在创建一个UI控件。它是一个条形图，根据输入以相对比例显示彩色区域。一些要求是在颜色之间有一个1px的边沟，并且无论相对宽度有多小，每种颜色都必须至少显示1px

该条如下所示：

排水沟的铺设方法如下所述：

这里有一个代码笔，它提供了一个工作示例：

我面临的问题是，当任何一种颜色的相对比例足够小时，最后一个颜色区域将换行到下一行，如下所示：

要复制此问题，请访问codepen项目，并将其输入为阈值数组值：

[{"value":0,"color":"LightGreen"},
{"value":50,"color":"PaleGoldenrod"},
{"value":5000,"color":"LightSalmon"},
{"value":10000,"color":"Salmon"}]

在本例中，浅绿色区域的宽度样式为0.33333%。在150px的棒材宽度下，这相当于0.495px。但是，由于要求每种颜色至少显示1px的宽度，浅绿色区域消耗2px的宽度（1px内容+1px填充）

---

感谢您的任何见解

您可以使用csscalc函数从每个截面的宽度计算中减去1px边距。[例如]

---

好建议！这里的问题是，在某些情况下，钢筋现在太小（不要占据容器的整个宽度）。只有3个垫片（3px），但总共减去4px。

[{"value":0,"color":"LightGreen"},
{"value":50,"color":"PaleGoldenrod"},
{"value":5000,"color":"LightSalmon"},
{"value":10000,"color":"Salmon"}]

coloredAreas.push({
  color: thresholds[i].color,
  width: 'calc(' + width + '% - 1px)'
});