为什么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>

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