I've spent the past week scouring various forums, including stackoverflow, but I haven't been able to find a solution.
In my responsive website, I'm using CSS flexbox to display dynamic menu items. Sometimes the text can be quite long, and if there's enough space vertically in my div, I'd like to split the text into multiple rows to minimize the width.
Here's 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 achieve: http://jsfiddle.net/etL630ew/2/
The current result is shown at the top, and at the bottom, I have added brs to simulate what I am aiming for.
Any solutions using only CSS would be greatly appreciated. If CSS alone won't cut it, then any JavaScript solution would also work!
Thank you for taking the time to read this.
Pouc