'how can I make a child of a div with display:flex, scroll down in small resolution?

I have a container with display:flex, and I have 3 children. I want that when the text of the first div does not occupy a single line:

, the last container is moved down, something like this:

how can do it?

.flex{
 display:flex;
 width:100%;
 border:1px solid red;
}

.flex div{
  border:1px solid blue;
  width:100%;
}

<div class="flex">
  <div class="longtext">By Team Developers People</div>
  <div>1 min</div>
  <div>26, Feb 2022</div>
</div>

css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source