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>