I have made a vertical tabber out of the flex display. I don't want to see the overlapping text aside from overflow hidden because my plan is to bring the overlapped text into new lines but I don't know how to do.
Please link to the example rather than just giving a screenshot. That said, my guess would be that you just need to use "word-break". It is not mentioned on the page I linked to but you probably want to avoid using the value "break-word" since it is supported by fewer browsers compared to the other values and a similar effect can be achieved by setting both "word-break" and "word-wrap".
You can't always tell from looking at just what one assumes to be the only relevant CSS. CSS can interact with other CSS and other parts of the page layout. So without a link to the page where you tried with with the failed attempt still there, I cannot simply tell you what is wrong.