ブラウザのウィンドウ幅よりも大きい指定をしたい

<body style="background-color:yellow;"> <div style="background-color:red;"> <p style="background-color:blue; white-space:nowrap; width:100vw;">ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </body>

ブラウザの幅1980pxと仮定

<p>に入力した「あああ...」はwhite-space:nowrap;のため折り返しをしません。

従ってブラウザの幅1980px以上となり横スクロールとなります。

この時に

<body style="background-color:yellow;"> に指定した背景色イエローはスクロールする部分も含めてブラウザ全体に反映します。 <p style="background-color:blue; white-space:nowrap; width:100vw;"> に指定した背景色ブルーは1980pxまでしか反映しません。スクロールで表示される部分まで「あああ...」がはみ出ていますが背景色ブルーとなっていません。

おそらくpの幅にwidth:100vw;を指定しても1980pxと認識されていると思います。

pの親要素divも同様に1980pxまでしか背景色がつきません。

スクロールする部分も含めてpに幅を指定する事はできませんでしょうか。

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

回答1件

ベストアンサー

CSS
1width: max-content;
2```**動くサンプル：**[https://jsfiddle.net/kubw9r7h/](https://jsfiddle.net/kubw9r7h/)
3
4---
5
6【width - CSS: カスケーディングスタイルシート | MDN】
7[https://developer.mozilla.org/ja/docs/Web/CSS/width#Values](https://developer.mozilla.org/ja/docs/Web/CSS/width#Values)
8
9【fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める | コリス】
10[https://coliss.com/articles/build-websites/operation/css/intrinsic-sizing-in-css.html](https://coliss.com/articles/build-websites/operation/css/intrinsic-sizing-in-css.html)