p tag is not expanding its width when a fixed height is given to p in a flexbox container

Question

Here is an example (with codepen included)

https://codepen.io/Sanjid-Chowdhury/pen/QWBBGbJ

 .container { display: flex; flex-direction: column; } p { height: 40px; }

 <div class="container"> <p>Your data</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt quam et repellendus harum possimus sequi, iusto nam tempore qui, sit quasi, Velit nisi numquam? non accusamus atque perspiciatis aperiam;</p> <p>WAFIjwaf oakd owad kalwd koawd sla ksa olafwa kosad </p> <p>afwad op wafk ag jasglksakmdfgfi efkf aioefjw oafkw alfk awijf jf dasklfskjasf ds</p> <p>eafifa osd okasg oeoagkesfal s;sdfpoasef ksadlf eaigjwg</p> </div>

If you decrease the window size, you will see that the <p> tag overflows vertically. I am looking for a behavior where the <p> tag will expand just as much as it needs to, given its fixed height. If i set the width of the .container to width: max-content , the whole tag turns into a line of text. I want it to take the available fixed height and then expand its width if the text starts to overflow vertically.

Answer 1

Try to add white-space:nowrap to your p tag

 .container { display: flex; flex-direction: column; } p { height: 40px; white-space: nowrap; }

 <div class="container"> <p>Your data</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt quam et repellendus harum possimus sequi, iusto nam tempore qui, sit quasi, Velit nisi numquam? non accusamus atque perspiciatis aperiam;</p> <p>WAFIjwaf oakd owad kalwd koawd sla ksa olafwa kosad </p> <p>afwad op wafk ag jasglksakmdfgfi efkf aioefjw oafkw alfk awijf jf dasklfskjasf ds</p> <p>eafifa osd okasg oeoagkesfal s;sdfpoasef ksadlf eaigjwg</p> </div>