滚动条出现时容器大小会更改

Question

我有一个sidenav显示悬停的sidenav。它隐藏在其他州。当滚动条出现时，sidenav上的内容宽度减小。您可以使用.active类背景查看。当滚动条出现并离开时，背景不会跨越整个宽度。当滚动条消失时，有没有办法让背景占据整个宽度。

body {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.sidenav {
  flex: 0 0 20%;
  border-right: 1px solid;
  overflow: hidden;
}

.sidenav:hover {
  overflow: auto;
}

.content {
  flex: 1 1 auto;
}

.active {
  background: cyan;
}

<div class="container">
  <div class="sidenav">
    <ul>
      <li class="active">one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
      <li>one</li>
    </ul>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, assumenda! Impedit culpa veniam id, aut sit rerum nisi, saepe dolorum tempore at velit nam explicabo fugiat consectetur mollitia nulla blanditiis.
  </div>
</div>