CSS3实现div从左到右扩展 日历事件块跨日期填充问题

核心原因 #

你当前事件双向扩展是因为.inner-container设置了align-items: center，子元素宽度超过父容器时，会向左右两侧均等溢出。要实现仅向右扩展、跨单元格填充的效果，改用绝对定位方案即可实现，修改代码如下：

调整后CSS代码

.cell-container{
  display: flex;
  justify-content: center;
  margin: 0px;
  align-items: center;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  /* 禁止裁剪溢出内容，确保跨单元格事件正常显示 */
  overflow: visible;
}

.date-label{
  font-weight: bold;
  margin-top: 8px;
}

.table-cell{
  display: flex;
}

.inner-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 添加相对定位作为事件块的定位锚点 */
  position: relative;
}

.event{
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  /* 示例为跨2天的宽度，可通过JS根据事件持续天数动态计算 */
  width: calc(200px * 2 + 1px);
  background-color: cornflowerblue;
  /* 改用绝对定位 */
  position: absolute;
  /* 固定从单元格左侧开始延伸 */
  left: 0;
  /* 调整位置到日期下方，可按需修改 */
  top: 35px;
  box-sizing: border-box;
  padding: 2px 8px;
  /* 拉高层级避免被其他单元格内容覆盖 */
  z-index: 10;
}

补充说明

• 事件宽度可以通过JS动态计算：如果事件持续n天，宽度公式为calc(200px * ${n} + ${n-1}px)，自动适配跨天长度
• 如果事件在某一天结束，可以给对应事件添加border-bottom-right-radius: 8px和border-top-right-radius: 8px优化样式
• 如果同一行有多个重叠时段的事件，可以调整top值错开高度，避免重叠遮挡

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