设置overflow:scroll的flex容器横滑时左侧内容无法显示的修复求助

这是flex布局下非常常见的溢出定位异常问题，完全由flex的默认计算规则导致：

• flex布局默认会给所有直接子项设置flex-shrink: 1，也就是容器空间不足时，子项会按照比例自动收缩适配
• 你给每列设置了min-width: 100px作为收缩的硬下限，7列的总最小宽度为700px。当视口宽度小于700px时，布局引擎把每个列收缩到100px的下限就不会再继续收缩
• 按照正常逻辑，超过容器宽度的部分应该向容器右侧溢出，触发横向滚动条；但因为默认的收缩计算逻辑存在偏差，这部分溢出量会被折算成容器左侧的隐藏偏移值。视口越窄，这个计算出来的左侧隐藏偏移量越大，最终就出现了不管怎么拉滚动条，左侧列总被挡住，只有右侧列显示完全正常的现象。

两处样式调整即可彻底解决问题：

• 给每个周列的公共样式中补充flex-shrink: 0，明确告知布局引擎这些列不参与自动收缩，直接保留100px宽度，让总列宽自然溢出容器：

  .week-column {
    min-width: 100px;
    flex-shrink: 0; /* 核心修复属性 */
  }
  

• 将flex容器原来的overflow: scroll替换为overflow-x: auto，既保留横向可滚动的能力，又不会因强制显示滚动条出现多余的纵向滚动条：

  .week-container {
    display: flex;
    overflow-x: auto; /* 替代原有的overflow: scroll */
  }
  

补充注意：如果这个可滚动的flex容器本身嵌套在其他横向flex布局的父元素中（比如页面为侧边栏+主内容区的分栏结构），还需要给这个滚动容器本身加上min-width: 0，避免容器被内部内容强行撑宽，导致整个页面出现无意义的全局横向溢出。

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