子div溢出能否影响父元素外div定位？日视图日历事件重叠问题

默认文档流规则下，子元素溢出父元素的内容，完全无法影响父元素外部其他div的定位。你当前遇到的跨小时事件遮挡后续事件的问题，本质是现有渲染逻辑和需求的匹配问题：你把每个小时区块拆成了独立的flex容器，跨小时事件仅靠高度溢出覆盖下方区域，溢出部分不参与下方容器的布局计算，下方小时块的事件自然感知不到上方溢出的内容，不可能自动向右避让。

你目前的实现逻辑存在天然局限：

• 逐小时生成独立的区块容器，仅将起始时间匹配当前小时的事件渲染进对应容器
• 跨小时事件通过设置大于单小时块高度（64px）的高度，视觉上延伸到下方小时块区域
  这种实现里，跨小时事件的宽度占位只存在于它所属的起始小时容器里，下方小时容器的布局完全不知道有事件跨下来占了宽度，必然会出现重叠。

不需要推翻现有按小时渲染的基础逻辑，把布局从Flex换成CSS Grid即可实现自动避让效果，所有小时块共用统一的列对齐规则，跨小时事件通过Grid的跨行属性真实占据布局位置，而非视觉溢出：

1. 修改小时块内容区.content样式，统一所有小时块的网格列规则：

.content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  width: 100%;
  border-top: 1px solid ${PLAIN_GREY};
  gap: 0 5px;
  align-items: start;
  position: relative;
}

2. 调整事件项.eventItemWrapper样式，去掉原width: 100%配置，通过Grid跨行属性实现跨小时占位，替代原有高度溢出逻辑：

.eventItemWrapper {
  display: flex;
  border-left: 2px solid ${color};
  background-color: ${WHITE};
  font-size: 12px;
  /* 高度按事件跨的小时数计算，单小时高64px */
  height: calc(${eventDuration} * 64px);
  position: relative;
  /* 核心：让事件跨对应数量的网格行，真实占据下方小时块的布局空间 */
  grid-row: span ${eventDuration};
  min-width: 120px;
}

3. 修改分割线.line样式，让它始终在最底层横跨整个内容区，不会被事件挤偏：

.line {
  height: 1px;
  width: 100%;
  background-color: ${LIGHT_GREY};
  margin: auto;
  /* 横跨所有列，固定在第一行最底层 */
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: -1;
}

实现逻辑说明：所有小时块的Grid列宽规则完全一致，跨小时事件通过grid-row: span N占据N个小时块（也就是N行网格）的对应列位置，下方小时块的事件渲染时，会自动跳过已经被上方跨事件占用的列，排到右侧空闲列位置，完全实现你要的同容器flex排列效果，没有任何JS计算的稳定性问题。

• 如果你坚持用子元素溢出的方式实现跨小时效果，没有任何纯CSS方法能让溢出内容推动外部独立容器的元素，必须靠JS实时计算每个事件的横向偏移量，后续适配窗口缩放、事件拖拽、动态增删事件时很容易出现错位bug，维护成本很高。
• 单纯调整现有Flex布局的属性没有效果，因为每个小时块是独立的flex容器，容器之间的布局互不干扰。

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