CSS Flexbox 自定义时间线小屏幕弹性项目重叠问题求助

核心问题定位 #

• 全局box-sizing配置错误，你给通用选择器设置了box-sizing: inherit，但body配置的是content-box，导致元素的边框、内边距会额外撑宽元素，挤压弹性布局可用空间
• .container固定了height: 100vh，内容超出视口高度时会被强制压缩导致重叠
• .timeline-row仅设置了min-width:25%没有最大宽度限制，也没有预留安全边距，小屏幕下可用宽度不足
• .timeline-row没有设置垂直间距，内容高度超出min-height:5rem时上下行直接重叠
• 弹性项flex:1没有配置最小宽度规则，小屏幕下会被无限制压缩

修复代码（仅修改对应CSS部分即可，HTML无需调整） #

:root{
  --image-url: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80";
}

*,
*::before,
*::after{
  margin : 0;
  padding: 0;
  box-sizing: border-box; /* 修正盒模型规则，边框内边距不会额外撑宽元素 */
}

body{
  font-size: 62.5%;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 内容从顶部开始排列，避免挤压 */
  min-height : 100vh; /* 改为最小高度，允许容器随内容增高 */
  padding: 2rem 1rem; /* 增加全局边距，小屏幕下不会贴边 */
  background-image: 
    linear-gradient(
      to right top,
      rgba(13, 13, 13, .75),
      rgba(13, 13, 13, 1)
    ),
    url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 固定背景，滚动时不会留白 */
}

.timeline-row{
  font-size: 1.2rem;
  display: flex;
  width: 100%; /* 宽度自适应父容器 */
  max-width: 900px; /* 大屏下限制最大宽度，避免布局松散 */
  min-height: 5rem; 
  margin-bottom: 2rem; /* 增加行间距，避免上下行重叠 */
  color: #fff;
}

.timeline-item{
  display: flex;
  align-items: center;

  &--date{
    flex: 0 0 80px; /* 日期栏固定宽度，不会被压缩 */
    border-right: 1px solid currentColor;
    justify-content: flex-end;
  }
  
  &--content{
    flex: 1; /* 内容栏占剩余全部宽度 */
    min-width: 0; /* 允许内容内部换行，不会超出容器 */
    border-left: 1px solid currentColor;
    position: relative;
    justify-content: center;
    
    &::before{
      content: "";
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      background-color:currentColor;
      position: absolute;
      top: 50%;
      left: -.55rem;
      transform: translateY(-50%);
    }
  }
}

.row-content{
  margin: .5rem 2rem;
  padding: .75rem;
  background-color: rgba(67, 85, 115, .35);
  border-radius: 15px;
  word-break: break-word; /* 长文本自动换行，避免撑破容器 */
}

修复说明 #

完全保留了原有时间线的左右边框+中间圆点的结构，小屏幕下会自动适配宽度，内容自动换行不会出现重叠，大屏下也有宽度限制保证布局美观。

内容的提问来源于stack exchange，提问作者Richard Užík