横向时间轴布局截断及Splide.js适配问题求助

需求描述 #

• 实现横向时间轴，通过JS调用API获取条目并展示
• 初始显示3个元素，支持滑块切换展示更多内容
• 时间轴中间有一条水平线，条目交替位于水平线上下两侧
• 条目高度随内容动态变化，宽度为33%减去部分边距

第一个问题：条目内容被截断 #

当前实现中，线上方的条目内容被截断（高度约5rem），使用绝对定位无法解决该问题。以下是现有代码：

CSS代码 #

.timeline-items {
  font-size: 0;
  width: 100%;
  padding: 250px 0;
  transition: all 1s;
  display: flex;
}

.timeline-items .itm-timeline-wrapper {
  flex-shrink: 0;
  width: 33%;
  position: relative;
  display: block;
  height: 3px;
  background: #000;
}

.timeline-items .itm-timeline-wrapper:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - 1.5rem);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #f45b69;
}

.timeline-items .itm-timeline-wrapper:nth-child(odd) .itm-timeline {
  top: -16px;
  transform: translateY(-100%);
}

.timeline-items .itm-timeline-wrapper:nth-child(odd) .itm-timeline:before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}

.timeline-items .itm-timeline-wrapper:nth-child(even) .itm-timeline {
  top: calc(-100% + 16px);
}

.timeline-items .itm-timeline-wrapper:nth-child(even) .itm-timeline:before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}

.timeline-items .itm-timeline-wrapper .itm-timeline {
  position: absolute;
  width: calc(100% - 1.5rem);
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: white;
  display: block;
}

HTML代码 #

<div class="timeline-wrapper">
    <div class="timeline">
        <div class="timeline-items">
        <div class="itm-timeline-wrapper">
          <div class="itm-timeline">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
          </div>
           <div class="itm-timeline-wrapper">
          <div class="itm-timeline"> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
          </div>
           <div class="itm-timeline-wrapper">
          <div class="itm-timeline">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam  erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
          </div>
        </div>
    </div>
</div>

当前问题：条目内容较多时上下部分被截断，无法完整展示，需要修复方案，不局限于绝对定位的实现方式。

编辑补充：Splide.js集成后的布局冲突 #

使用网格布局方案解决截断问题后，集成Splide.js作为滑块切换条目，设置perPage: 3后，插件自动为每个.itm-timeline元素设置33.33%宽度，与之前方案中的grid-auto-columns: 33%规则冲突，导致布局破坏。尝试设置grid-auto-columns: 100%无效，寻求解决方法。

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