HTML/CSSレイアウトについて

#概要
overflow:scroll;とwrite-space:nowrap;によるスクロールの制御
###　やっていること
0. div要素をsection要素最下部に固定
0. div要素の中のp要素を横並びにする
###　やりたいこと
0. p要素が改行するので改行しないようにする
0. div要素の中にスクロールバーを作ってスクロールでp要素を見れるようにする
#完成イメージ

#ソースコード

HTML
1<section class="scroll">
2    <div>
3      <p>*30くらい
4    </div>
5  </section>

SCSS
1.scroll{
2height:100vh;
3display:flex;
4flex-flow:column nowrap;
5div {
6margin-top: auto;
7overflow: scroll;
8
9p {
10white-space: nowrap;
11float: left;
12}
13}

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

回答1件

ベストアンサー

inline-block にして横並びにするか、

scss
1.scroll {
2  height: 100vh;
3  display: flex;
4  flex-flow: column nowrap;
5
6  div {
7    margin-top: auto;
8    overflow: scroll;
9    white-space: nowrap;
10    p {
11      white-space: nowrap;
12      display: inline-block;
13    }
14  }
15}

あるいは、flexレイアウトで横並びにすればどうでしょう。

scss
1.scroll {
2  height: 100vh;
3  display: flex;
4  flex-flow: column nowrap;
5
6  div {
7    margin-top: auto;
8    overflow: scroll;
9    display: flex;
10    flex-flow: row nowrap;
11    p {
12      white-space: nowrap;
13    }
14  }
15}