css - 为什么 div 不传播整个 div 容器？

Question

我希望 div 的背景在悬停时改变。但是在悬停时，不会改变整个 div 背景颜色（因为 div 宽度不会覆盖它所在的 div 的整个宽度）。你能否让我知道如何解决它。下面是代码片段，

.list_container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  ul {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
      li {
        .list {
          margin: 0;
          display: flex;
          align-items: center;
          &:hover {
            background-color: green;
          }
        }
      }
    }
  }
}

<div className="list_container">
  <header>
    <h4>Listitems</h4>
  </header>
  <ul>
      <li>
        <div className="list"><span>hello</span></div>
          <ul>
             <li>
                <div className="list"><span>hello</span></div>
              </li>
          </ul>
        </div>
      </li>
    </div>
  </ul>
</div>

具有类名列表的 div 不会扩展它所包含的整个 div 的宽度（即列表）。列表项是动态添加的。因此，随着列表项的增长......带有类列表的 div 不会覆盖整个 div list_container。我怎样才能解决这个问题。谢谢。

标签： css