CSS prevent div flex from stretching child

Question

The moment div has the flex display property it stretches the paragraph. I seem to be missing something but no property I can think to put on the flex div changes this. How can I prevent this behavior? (without the flex property I get the result on the right in the image)

 div { display: flex; justify-content: center; flex-direction: column; height: 200px; width: 100px; } p { background-color: green; display: inline; }

 <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </p> </div>

Answer 1

add another wrapper:

 div { display: flex; justify-content: center; flex-direction: column; text-align:center; height: 200px; width: 100px; } p span{ background-color: green; }

 <div> <p> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span> </p> </div>

Related question to understand why your inline is ignored:

Are flex items a block level element?

Usage of display property of flex box items

Answer 2

 span { -webkit-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone; background-color: green; } div { text-align:center; height: 200px; width: 100px; }

 <div> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </span> </div