给列表添加overflow:auto后列表项宽度异常缩小的问题求助

问题原因 #

你的.list是flex容器，默认情况下flex项目的flex-shrink属性值为1，当容器空间不足时，项目会自动收缩以适应容器宽度。加上你给.list设置了固定宽度400px !important，而内部.list-id（220px）加上.featured-products的总宽度（3个200px共600px）远超过400px，所以.list-id被压缩了。

解决方案 #

1. 阻止.list-id收缩 #

给.list-id添加flex-shrink: 0，强制它保持设置的宽度：

.list-id {
  height: 100%;
  width: 220px;
  padding: 30px 0 0 30px;
  box-sizing: border-box;
  flex-shrink: 0; /* 新增这一行 */
}

2. 修复HTML语义化问题（可选但推荐） #

HTML规范中<ul>不能直接作为另一个<ul>的子元素，应该把.featured-products放在<li>里面：

<ul class="list">
  <li class="list-id">
    <h3 class="list-title">Products</h3>
    <p class="list-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </li>
  <!-- 修复嵌套结构 -->
  <li>
    <ul class="featured-products">
      <li class="product"></li>
      <li class="product"></li>
      <li class="product"></li>
    </ul>
  </li>
</ul>

这样修改后，.list-id就能保持220px的宽度，同时容器的overflow:auto会正常显示横向滚动条来容纳超出的内容。

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