Javascript CSS-宽度大小百分比不小于'；Don’所有的决议看起来都不一样

我正在用react开发一个日历

日历网格是一个表元素，其中每个单元格都包含一个div，其中包含月份及其事件。 多日活动应从活动开始之日起到结束之日止。 我实现了这一行为，并用计算出的百分比设置了宽度，因此它将具有响应性。 活动在全屏幕上看起来不错，但一旦我开始缩小窗口，它就不一样了。应该一直持续到最后一天结束的事件没有结束，并且在结束之前完成了几个像素的扩散

为了保持从全尺寸到所有分辨率的相同外观，需要做什么

编辑1

事件组件：

const Event = ({ cellWidth, tableWidth, eventColor, styleClass, 
isTimeShown, onEventClicked, time, title, startDate, endDate, 
weekStarter, isAllDay, isMultiDay, duration }) => {

const eventRef = React.useRef<HTMLDivElement>();
const inlineStyles = isMultiDay || isAllDay ?
{ background: eventColor } :
{ borderLeft: `2px solid ${eventColor}` };
let event = getDefaultEvent({ eventRef, inlineStyles, isTimeShown, 
onEventClicked, time, title, isAllDay, isMultiDay });

event = isMultiDay && cellWidth ? getMultiDayEvent({ cellWidth, event, 
duration }) : event;
return event;
};

包含事件div css的多日div：

 .Event {
 position: relative;
 -st-states: isAllDay, isMultiDay;
 padding-left: 4px;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 overflow: hidden;
 max-width: 99%;
 }

.MultiDay {
z-index: 10;
}

编辑2

看起来百分比宽度并不是基于容器的实际宽度（边框+填充+宽度），它只是基于宽度。是否有一种方法可以实现与实际宽度相适应的尺寸？ 这样，宽度计算就更容易了：

const eventWidthByDuration = (duration * 100) + '%';

---

问题是百分比单位不是基于容器的实际宽度（宽度+填充+边框），而是基于宽度。如果容器具有

框大小：边框框，则没有帮助，但它的子项宽度将由其原始宽度计算。去掉填充物解决了大部分问题，因为边界是1px，计算不是100%正确，但要好得多
（在缺少4px的图像中可以看到，每个单元格内和外各有2个）：


（仍然保存比例，百分比单位再次有意义……嗯，有点：）


现在唯一缺少的是如何仍然添加填充-可能在不同的容器中包含正常事件。。。这是另一个问题，如果有人想到解决方案，请告诉我
请发布您的html/css代码！否则我们不知道为什么这不起作用。不确定宽度是否是正确的方式-如果事件跨越两行怎么办？无论哪种方式，共享您的代码，因为您可能有与px或rems（？）不匹配的百分比值。代码放在这里。@user0101事件不能超过1行。这是百分比，我检查的时候看到了。我只是不明白，如果一个尺寸的宽度百分比看起来有某种程度的不同，为什么另一个尺寸看起来会不同。
.MultiDay {
z-index: 10;
}

const eventWidthByDuration = (duration * 100) + '%';