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

Question

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

#ソースコード

<section class="scroll">
    <div>
      <p>*30くらい
    </div>
  </section>

.scroll{
height:100vh;
display:flex;
flex-flow:column nowrap;
div {
margin-top: auto;
overflow: scroll;

p {
white-space: nowrap;
float: left;
}
}

Answer 1

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

.scroll {
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;

  div {
    margin-top: auto;
    overflow: scroll;
    white-space: nowrap;
    p {
      white-space: nowrap;
      display: inline-block;
    }
  }
}

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

.scroll {
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;

  div {
    margin-top: auto;
    overflow: scroll;
    display: flex;
    flex-flow: row nowrap;
    p {
      white-space: nowrap;
    }
  }
}