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

Question

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

Answer 1

.scroll {
flex-direction: column;
}
add this style..this will change the content flow to column wise

Answer 2

Flexbox provided a property called flex-direction. Which means that what direction the flexbox children are laid out in and by default this is set to row. flex-direction
.parent {
display: flex;
}
<div class="parent">
<div class="child1">
<p>Hello I'm Child 1</p>
</div>
<div class="child2">
<p>Hello I'm Child 2</p>
</div>
<div class="child3">
<p>Hello I'm Child 3</p>
</div>
</div>
As you see that in above example div is a block level element but they appear as inline becuase flex-direction is set to row by default. Now change the direction from row to column that will put flexbox children in a column layout.
.parent {
display: flex;
flex-direction: column;
}
<div class="parent">
<div class="child1">
<p>Hello I'm Child 1</p>
</div>
<div class="child2">
<p>Hello I'm Child 2</p>
</div>
<div class="child3">
<p>Hello I'm Child 3</p>
</div>
</div>
Hope that you understand the concept of flex-direction.