为何滚动式无序列表的列表项无法填满容器宽度？

这个问题我之前也碰到过，核心原因是默认情况下，列表项的宽度只会匹配父容器的初始可视宽度，而不会跟着滚动区域的最大宽度（也就是最长列表项的宽度）走。给你几个靠谱的解决方案：

直接把ul改成Grid布局，让每个列表项自动填满整个滚动区域的宽度：

ul {
  border: 1px solid;
  list-style: none;
  overflow-x: auto;
  padding: 2em;
  width: 300px;
  /* 新增Grid布局配置 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

li {
  border: 1px solid red;
  white-space: nowrap;
}

通过垂直方向的Flex布局，强制列表项撑满父容器的内容宽度：

ul {
  border: 1px solid;
  list-style: none;
  overflow-x: auto;
  padding: 2em;
  width: 300px;
  /* 新增Flex布局 */
  display: flex;
  flex-direction: column;
}

li {
  border: 1px solid red;
  white-space: nowrap;
  /* 让列表项宽度撑满父容器内容宽度 */
  width: 100%;
}

如果不想修改原ul的布局逻辑，可以给它套一个固定宽度的外层容器，让ul根据最长列表项撑开宽度，再让外层负责滚动：

<div class="scroll-wrapper">
  <ul>
    <li> This is very long. This is very long. This is very long. This is very long. </li>
    <li> This is short. </li>
  </ul>
</div>

.scroll-wrapper {
  width: 300px;
  overflow-x: auto;
  border: 1px solid; /* 原ul的边框移到外层容器 */
}

ul {
  list-style: none;
  padding: 2em;
  width: fit-content; /* 让ul宽度由最长列表项撑开 */
  margin: 0; /* 清除默认margin避免滚动区域留白 */
}

li {
  border: 1px solid red;
  white-space: nowrap;
  width: 100%; /* 撑满ul的实际宽度 */
}

这几个方案里，Grid布局是最省心的，不需要额外嵌套就能解决问题，你可以根据自己的实际场景选最合适的。

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