position: fixed; した要素を、親要素スクロールバーの内側に置きたい

前提

bodyをスクロールさせず、内側の.scrollという要素をスクロールさせています。

###実現したいこと
下記ソースコードにおいて、.infomation（赤い要素）を、.contents（青い要素）と同じ左右位置（つまりスクロールバーが加味された幅の真ん中）に置きたいです。

発生している問題

赤い要素はfixedしてあるためにスクロールバーの位置が加味されず、青い要素より少し右に位置してしまうことが問題です。

該当のソースコード

実際のサンプルを作りました。
https://jsfiddle.net/4gyxa276/

白い点線があるように、赤い要素が右にズレてしまっているのがお分かりいただけるかと思います。

下記は上のサンプルのソースコードになります。

html
1<div class="scroll">
2  <div class="outer">
3    <div class="inner">
4      <div class="contents">赤い要素を青い要素と同じ左右位置に置きたい</div>
5    </div>
6  </div>
7  <div class="infomation">infomation</div>
8</div>

CSS
1body {
2    overflow: hidden;
3    margin: 0;
4    padding: 0;
5}
6.scroll {
7    background: gray;
8    height: 100vh;
9    padding: 20px;
10    overflow-y: scroll;
11    overflow-x: hidden;
12}
13.inner {
14    background: black;
15    width: 100%;
16    height: 1000px;
17    display: flex;
18    justify-content: center;
19    align-items: start;
20}
21.contents {
22    background: blue;
23    width: 300px;
24    z-index: 999;
25    color: white;
26    position: relative;
27    padding: 10px;
28}
29.contents:before,
30.contents::after {
31    content: '';
32    position: absolute;
33    height: 1000px;
34    width: 2px;
35    top: 0;
36}
37.contents::before {
38    border-left: 3px dotted white;
39    left: 0;
40}
41.contents::after {
42    border-right: 3px dotted white;
43    right: 0;
44}
45.infomation {
46    position: fixed;
47    background: red;
48    width: 300px;
49    bottom: 50px;
50    padding: 10px;
51    left: 0;
52    right: 0;
53    margin: 0 auto;
54}