overflow-x: auto で疑似要素を横いっぱいに広げたい

Question

質問させてください。
以下のようにボックスにoverflow-x: autoを指定して、要素内の文字がはみ出た場合横スクロールバーを出すようにしています。そしてその上から疑似要素をボックスに重ねています。

<div class="box">
  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</div>

.box {
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
}

.box::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #cfc;
}

このとき横スクロールバーを動かすと、疑似要素が元の画面サイズのまま途中で切れてしまうのですが、スクロールバー動かしても横いっぱいに広げる方法はありますでしょうか。
疑似要素にwidth: 100%やoverflow-x: auto;を追加してみたりしたのですが、上手くいきませんでした。
どなたか解決方法をご存じの方がいらっしゃいましたら、ご教示いただけると助かります。
よろしくお願いいたします。

Answer 1

テキストをラップするのはどうでしょうか。

    <div class="box">
        <div>
            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </div>
    </div>

        .box {
            overflow-x: auto;
        }

        .box>div {
            position: relative;
            width: max-content;
            white-space: nowrap;
        }

        .box>div::before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #cfc;
        }

Comments

[takopo]

ご回答ありがとうございます。
max-contentという長さがあるのですね。こちらの方法で横いっぱいに広げることができました。
今回はJavascriptで作成してみたいと思っているのですが、こちらの方法も何かのときに使えそうなのでとても参考になりました。ありがとうございました。

Answer 2

.box::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	width: 10000%;
	top: 0;
	bottom: 0;
	background-color: #cfc;
}

.box::before {
	content: '';
	position: absolute;
	left: 0;
	right: -10000%;
	top: 0;
	bottom: 0;
	background-color: #cfc;
}

よく知りませんが、rightやwidthを100%以上に大きくするのはいかがでしょうか。
一案として回答します。

Comments

[takopo]

ご回答ありがとうございます。
こちら試してみたのですが、横スクロールバーが必要以上に長くなってしまいます…

[querykuma]

JavaScriptなら取れますが、CSSでscrollWidthを取れないと思います。
次がstackoverflowの質問で、JavaScriptの解決策が載っています。
https://stackoverflow.com/questions/62660470/how-to-use-scrollwidth-value-of-parent-element-using-css
他には、scrollWidthとぴったりか少し長いwidthを直接指定することでしょうか。

[takopo]

stackoverflowのページをご紹介いただきありがとうございます。こちらの質問とほぼ同じでした。
おっしゃる通り画面幅でカバーするのはCSSだけでは難しいのですね…
なので解決策に書かれているJavascriptの方法を試してみたいと思います。
とても助かりました。ありがとうございました。