The problem is that percentage units are not based on the actual width of the container (width + paddings + border), just the width. It doesn’t help if the container has box-sizing: border-box;, still it’s children width will be computed by it’s original width. dropping the paddings fix most of the problem since the border is 1px, the calculation is not 100% right but it’s much better
(it can be viewed in the image the 4px missing, 2 from each cell – inside and outside):

(still proportions are saved, and percentage units make sense again… well kinda:)

now the only thing missing is how to still add paddings – maybe contain the normal events in a different container… that another question, still if anyone think of a solution let me know

I’m developing a calendar using react.

The calendar grid is a table element, where each cell contain a div holding the month day and it’s events.
Multi day events should spread from the day they start to the day they end.
I achieved this behaviour, and set the width with the calculated percentages so it will be responsive.
The event looks good on the full size screen, but once i start to narrow the window down it doesn’t stay the same. The event that should be all the way to the end of the last day isn’t reaching the end, and finish spreading a few pixels before.

What is need to be done in order to keep the same look from the full size to all the resolutions?

EDIT 1

the event component:

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;
};

default event:

const getDefaultEvent = ({ eventRef, inlineStyles, isTimeShown, 
onEventClicked, time, title, isAllDay, isMultiDay }) => {
return (
<div
  ref={eventRef}
  {...style(style.Event, { isMultiDay, isAllDay })}
  style={inlineStyles}
  onClick={() => onEventClicked(time)}
>
  {isTimeShown && <div className={style.Time}>{time}</div>}
  <div className={style.Title}>{title}</div>
</div>
)
};

code that calculate the width based on the event duration and the cellWidth (I added 30 because of the cell paddings which are 15px to each side):

const getMultiDayEvent = ({ cellWidth, event, duration }) 
=> {
const eventWidthByDuration = (((cellWidth + 30) * duration)/cellWidth) 
* 100 + '%';
const inlineStyles = { minWidth: eventWidthByDuration };
event = (
<div style={inlineStyles} className={style.MultiDay}>
  {event}
</div>)
return event;
}

event div css:

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

multi day div which contain the event div css:

.MultiDay {
z-index: 10;
}

EDIT 2

It seems that the percentage width is not based on the actual width of the container ( border + padding + width), it’s based only on the width. Is there a way to achieve size which is responsive to the actual width ?
That way the width calculation could be easier:

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