如何让子div扩展至设为overflow-x:scroll的父div的100%宽度

我来帮你搞定这个常见的flex布局小坑——当父容器开了横向滚动时，子元素没法占满其实际宽度的情况，在你的.wrapper用flex-direction: column的场景下确实容易出现。

问题根源 #

你的.wrapper是flex容器（纵向排列），默认的align-items: stretch本应让子元素在水平方向拉伸，但因为父容器开启了overflow-x: auto，子元素（比如.timeline）往往只会识别当前视口的可见宽度，而不是父容器因为内容溢出产生的实际可滚动宽度。再加上.timeline本身是横向flex容器，它的宽度如果没有强制约束，就不会跟着父容器的滚动宽度走。

具体解决方案 #

方案1：给子容器强制设置最小宽度

这是最直接有效的方法，给.timeline添加min-width: 100%，确保它至少和父容器的宽度一致，哪怕父容器因为内容溢出产生滚动，子容器也会跟着扩展到父容器的实际宽度：

.wrapper { 
  position: absolute; 
  width: 100%; 
  border: 1px solid black; 
  overflow-x: auto; 
  display: flex; 
  flex-direction: column; 
}
.timeline { 
  position: relative; 
  left: 0; 
  right: 0; 
  width: 100%; 
  min-width: 100%; /* 新增这一行，强制子容器宽度不小于父容器 */
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  border-bottom: 1px solid black; 
  border-top: 1px solid black; 
}
.timeline::after { content: ''; display: table; clear: both; }
.timeline .date { 
  position: relative; 
  width: 60px; 
  height: 50px; 
  flex-shrink: 0; 
  flex-basis: 60px; 
  flex-grow: 1; 
}
.timeline .date span { 
  display: inline-block; 
  width: 100%; 
  height: 100%; 
  text-align: center; 
  line-height: 50px; 
}
.timeline .date::before { 
  content: ''; 
  position: absolute; 
  height: calc(100vh - 125px); 
  margin-top: 50px; 
  left: 50%; 
  background-color: black; 
  width: 1px; 
}

方案2：显式声明父容器的对齐方式（可选补充）

有时候浏览器的默认样式可能被其他规则干扰，你可以给.wrapper显式设置align-items: stretch，确保子元素的拉伸行为生效：

.wrapper { 
  /* 原有样式保留 */
  align-items: stretch; /* 显式声明，避免被其他样式覆盖 */
}

效果说明 #

当你的.date元素总宽度超过.wrapper的视口宽度时，.wrapper会自动出现横向滚动条，而.timeline因为min-width:100%的约束，会完全贴合.wrapper的滚动宽度，确保所有日期标签都能正常排列，同时父容器的滚动行为不受影响。

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