スクロールバーの要素の中に同じ幅の物を縮小されずに後からいくつもいれたい

Question

white-space: nowrap; を使い一つのスクロールバーの部分は解決できたのですが、

もう一つのスクロールバーの部分で同じよう white-space: nowrap;を使い
うまくいくはずと思ってやったのですが、その部分では何故かｐタグの文章まで
white-space: nowrap;　化してしまい　スクロールバーの中の一つの箱width282ｐｘからはみ出てしまいます。
これはなぜでしょうか？解決する方法を教えていただけたら幸いです。

Comments

[hatena19]

現状のHTMLとCSSを質問に追記してください。
要素を横並びにする方法はいろいろあり、それによって対策は異なりますので。

[ke-si]

<h2 class="experi"><span>体験したユーザーの声</span></h2>
<div class="scroll-box">
<div class="user-flexbox">
<div class="user-voice">
<div class="user-info">
<img src="user-voice1-8f14862dc9bae575e30108c8bb0a88221f9c35c5f1204e2294294b43c2485f70.jpg">
<p>H.Nさん（35）</p>
</div>
<p>晩酌のときの話が仕事とかになりがちでしたが、「このビールどんなおつまみに合うかな」とか、食べてるも のや飲んでるものについての話が増えました。<br>
一緒にビールを調べて、料理して、お酒を飲んで楽しい時間を過ごせました。</p>
</div>
<div class="user-voice">
<div class="user-info">
<img src="user-voice2-d64f1afa7b92b9171bb1feae80797aae27befc8412632cb832ba69cf878f350b.jpg">
<p>K.Mさん（25）</p>
</div>
<p>ビール実はあんまり好きじゃないんですが、夫がビール好きなので、
一緒に飲めるようになったらいいなって思ってました。
6本セットの中にレモンビールが入ってて、それは私でも飲めました！！
ただ中には苦手で飲めないものもあったので、夫にあげました 笑</p>
</div>
<div class="user-voice">
<div class="user-info">
<img src="user-voice3-df7bfa8234b01540885b35c42d01a60c42e4a69790ff89dd751734931112aa40.jpg">
<p>T.Hさん（41）</p>
</div>
<p>冷蔵庫の前で「何から飲もうっか？」と旦那と作戦会議しはじめたら30分経過 笑
一気に何本かいって飲み比べるか、一本一本飲んde
いくか迷いどころです。
今日どれにしよっかな？が毎回飲む時の楽しみになりました。</p>
</div>
<div class="user-voice">
<div class="user-info">
<img src="user-voice4-ff56581ca27943cb484040f1c9d21ac7e659491404c3bfe0cecc76e65646c66f.jpg">
<p>C.Sさん（33）</p>
</div>
<p>「これ飲んだことあるー」とか、「これ知らない !!」とか、意外と盛り上がりました。
初めて飲んだやつがラベルかわいくてすっきり飲みやすいしすごい気に入って。
あれまた飲みたいね、って話してたんです</p>
</div>
<div class="user-voice">
<div class="user-info">
<img src="user-voice5-77aa473cb19e0afdb896990232c6f353f1a94aa7fb5c1a87b62ad208846e83b2.jpg">
<p>A.Aさん（47）</p>
</div>
<p>クラフトビール飲む機会がなくて、いつもチューハイばっかりだったんですが、
クラフトビールにハマりました 笑
どんなところにこだわって作ってるのかとか、もっと知りたいです。</p>
</div>
<div class="user-voice">
<div class="user-info">
<img src="user-voice6-ef2ee651c6184334f634f0f76c825ea559032b2058503cff1635958e404324f1.jpg">
<p>S.Nさん（34）</p>
</div>
<p>ネーミングが好き！
あと、飲むペースがうちは遅いので、まだ残ってるときに次回の配送をスキップできるのが
地味に助かります。</p>
</div>
</div>
</div>
</section>

.scroll-box{
overflow-x: auto;
}
.user-flexbox{
display: flex;
width: 1870px;
min-width: initial;
justify-content: flex-start;
}

.user-flexbox .user-info img{
width:28px;
height:28px;
border: solid 1px #24264a;
border-radius:50%;
padding: 0;
}

.user-flexbox .user-info{
display: flex;
}

.user-voice:first-child{
margin-left: 3%;
}

.user-voice{
box-sizing: border-box;
padding: 15px 12px;
width: 282px;
border: solid 1px #e6e6e6;
background-color: #ffffff;
margin: 0 12px 0 0;
}

.user-voice p{
text-align: left;
line-height: 1.5;
color: #474d50;
font-size: 12px;
margin:8px 0 0 8px;
}

Answer 1

white-spaceは子孫に継承しますので、子要素のボックスも折り返されなくなります。
子要素でwhite-space: normal;と初期値の戻せばいいでしょう。

ただ、今なら、CSS Flexbox で横並びにするのがお勧めです。シンプルになるし自由度も高いです。

<div class="scroll-box">
  <div class="inner-box">inner-box inner-box inner-box inner-box inner-box inner-box </div>
  <div class="inner-box">box</div>
  <div class="inner-box">box</div>
  <div class="inner-box">box</div>
</div>

.scroll-box {
  width: 850px;
  overflow: auto;
  border: 1px solid gray;
  display: flex;
}
.inner-box {
  border: 1px solid blue;  
  flex: 0 0 300px;
}

Comments

[ke-si]

回答ありがとうございます、これは試してなかったと思い
子孫に継承するとのことで、white-space: normal　をスクロールバーの中の子要素の箱やはみ出ているＰタグなどに　書いてみましたが。うまくいきませんでした。