Question about horizontal scroll in CSS with <p> paragraphs html

I'm learning web dev basics with HTML and CSS. I met an issue today : I want to make a horizontal scroll on my page with paragraphs (represented here by Lorem) inside but they appear in line while i want them in block.

Here's my code :

.scroll {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.part {
    display: inline-block;
    align-content: flex-start;
    overflow-x: visible;
    overflow-y: visible;
    flex-wrap: wrap;
    height: 200px;
    width: auto;
}

<div class="scroll">
  <div class="part">
    <p>
      Lorem...
    </p>
  </div>
  <div class="part">
    <p>
      Lorem...
    </p>
  </div>
  <div class="part">
    <p>
      Lorem...
    </p>
  </div>
</div>

I have been trying tons of things but unsuccessful... (I think the first part is good)

Thanks in advance

Solution

.scroll { 
    flex-direction: column;
}

add this style..this will change the content flow to column wise