Why is P element in DIV with display:flex is getting inline?-CodePudding

I'm creating a web app then I found a problem, that <p> tag in <div> with display:flex is not getting in new lines, also <br> tag is not working too and seems that I cannot goto the next line even with <br>,<p> tag. Here is my code

<div style="display:flex">
    <p>Hello</p>
    <br />
    <p>World</p>
</div>

Output

HelloWorld

I want it to be

Hello
World

Everything in the <div> is behaving like a block element. Note that I have to use flex

Thanks

CodePudding user response：

You should apply flex-direction: column to the flex element to align the elements vertically.

The default value for flex-direction is row which aligns the elements inside the container horizontally.

<div style="display:flex; flex-direction: column">
    <p>Hello</p>
    <p>World</p>
</div>