fixedの要素が親のスクロールバーとかぶる問題

以下のコードでfixedした要素とスクロールバーがかぶる問題が発生します。

検証した内容としては、親のスクロールバーが出現して、fixedの要素のスクロールバーが出現しない場合に、親のスクロールバーとfixedの要素がかぶるようです。

解消方法がわかる方いましたら教えていただけると助かります。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7    <style>
8      .parent {
9        position: fixed;
10        display: block;
11        top: 0;
12        left: 0;
13        bottom: 0;
14        padding-top: 0;
15        z-index: 160;
16        width: 100vw;
17        height: 100vh;
18        overflow: auto;
19        background-color: blueviolet;
20      }
21
22      .header {
23        width: 100%;
24        background-color: red;
25      }
26    </style>
27  </head>
28  <body>
29    <div class="parent">
30      <div class="header">
31        ヘッダーテキストヘッダーテキストヘッダーテキストヘッダーテキストヘッダーテキスト
32      </div>
33    </div>
34    <!-- スクロールバーがでるように要素を配置 -->
35    <div class="scroll-item" style="height:1000px;">テスト</div>
36  </body>
37</html>

結果の画像

行動規範の内容に同意します

回答1件

ベストアンサー

.parentの width: 100vw;をwidth: 100%;に修正すればいいでしょう。

100vwは画面自体の幅、100%はスクロールバーがあるときはそれを除いた幅になります。

css
1.parent {
2  position: fixed;
3  display: block;
4  top: 0;
5  left: 0;
6  bottom: 0;
7  padding-top: 0;
8  z-index: 160;
9  width: 100%; /* 修正 */
10  height: 100vh;
11  overflow: auto;
12  background-color: blueviolet;
13}