I'm working on a flexbox with flex-direction: column and a fixed height. One of the flex items has flex: 1 to fit the remaining available space in the flexbox when necessary. My issue is that sometimes this flex item has text content that (if my language is correct) vertically overflows its container.
What I want to have happen is that the text content is truncated the way that text-overflow: ellipses usually does it, but I'm not finding a way that I'm able to make this happen.
You can see a demo I set up on Codepen where you can click the swap text button to swap between short an long text, where the long text does not use ellipses when overflowing. I've made an effort to separate out the important CSS to the issue and the visual aids to show what's happening on this demo.
Any help would be greatly appreciated! Thanks so much.
