html - CSS 让滚动条占据自己的空间而不覆盖页面内容

Question

我有一个带有按钮的固定工具栏 btn1 , btn2 , btn3 (工具栏设置为 display: flex 、 justify-content: space-between 和 position: fixed )，但不幸的是，当页面内容太长导致出现滚动条时，滚动条会覆盖 的一部分btn3 .我应该怎么做才能使滚动条出现时占据自己的空间？或者让工具栏自动拉伸(stretch)一点，为滚动条留出一些空间？
没有滚动条
带滚动条(三个点在滚动条后面)

.Toolbar {
  height: 65px;
  background-color: rgb(48, 48, 48);
  color: white;
  width: 100vw;
  position: fixed;
  box-shadow: 0px 2px 6px -2px rgb(138, 138, 138);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.WholePage {
   height: 1000px;
}

<div class="WholePage">
  <header class="Toolbar">
    <div>btn1</div>
    <div>btn2</div>
    <nav>btn3</nav>
  </header>
</div>

Answer 1

将宽度强制为 100vw将其推到滚动条后面。使用100%反而。

.Toolbar {
  height: 65px;
  background-color: rgb(48, 48, 48);
  color: white;
  width: 100%;
  position: fixed;
  box-shadow: 0px 2px 6px -2px rgb(138, 138, 138);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.WholePage {
  height: 1000px;
}

header>* {
  border: 2px solid pink;
  padding: 3px;
}

<div class="WholePage">
  <header class="Toolbar">
    <div>btn1</div>
    <div>btn2</div>
    <nav>btn3</nav>
  </header>
</div>