如何让列表项悬停高亮占满父列表全宽（模拟IDE文件树效果）

问题根源 #

滚动容器内的块级列表项默认宽度仅等于容器的可视宽度，内容超出产生横向滚动后，列表项本身的宽度不会跟着内容延伸，导致 hover 背景只能覆盖原可视区域范围。

解决方案 #

只需修改少量 CSS 即可解决，无需重构 HTML 结构：

body {
  font-size: 16px;
  font-family: monospace;
}

.tree {
  box-sizing: border-box;
  width: 200px;
  height: 400px;
  margin: 0;
  padding: 20px 0;
  overflow-x: scroll;
  background-color: #ebedef;
  /* 新增：清除默认列表样式 */
  list-style: none;
  /* 新增：grid单列布局，让子项宽度自动适配最长内容 */
  display: grid;
  grid-template-columns: 1fr;
}

.tree-node {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  height: 18px;
  padding: 6px 0;
  cursor: pointer;
}

.tree-node:hover {
  background-color: #dbdde0;
}

.tree-node span {
  line-height: 18px;
  /* 新增：控制文件名不换行，原white-space从.tree移到这里 */
  white-space: nowrap;
}

.tree-node svg {
  margin-right: 7px;
}

说明 #

• grid 布局会自动让所有列表项的宽度等于最长内容的总宽度，不管横向滚动到什么位置，hover 背景都会铺满整行
• 无需调整你原来的padding-left缩进逻辑，原有层级展示效果完全保留
• 如果需要兼容非常旧的浏览器，也可以给.tree内层加一个<div class="tree-inner">包裹所有li，给.tree-inner设置display: inline-block; min-width: 100%;，再给.tree-node设置width: 100%;，效果一致。

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