Split text to minimize width while height constraint on div

I searched for a week on many forums including stackoverflow and couldn't find an answer.

I am using css flexbox to print dynamic menu items in a responsive website. The text can be long, and if the height allows it, I would like to split the text across multiple lines so that it still fits vertically in my div and this will reduce the width.

I have an example:

Html

<div class="wrapper">
    <div class="text">
        Hello pouc nice to meet you!
    </div>
    <div class="text">
        It would be a great pleasure to help you ;-)
    </div>
    <div class="text">
        Seriously, if ever you had an idea I would be very glad!
    </div>
</div>

      

        
        
        
      

    

CSS

.wrapper {
    display: flex;
    flex-direction: row;
    overflow-x: auto;

    height: 80px;
    width: 400px;
}

.text {
    flex-shrink: 0;

    background: pink;
    margin: 2vh;
}

      

        
        
        
      

    

Here is a link to what I am trying to accomplish: http://jsfiddle.net/etL630ew/2/

At the top of the current result, and at the bottom, I entered brs to simulate what I would like to do.

Any answer with CSS would just be great. If I can't do it with CSS, then any js solution would be good too!

thank you for your time

Pouc