Time for a real challenge.
Is what I've got. I'd like the red portition to spread over the div, and fill entire height, while
You can't/Tried but failed:
overflow: hidden, because it doesn't work (I thought it will render some overflow and stuff, I don't know).
position: absolute/relativeunless you know how to make DIVs adhere to rules already in CSS (mentioned
widths). So, that red DIV is still "350px" and the green DIV is filling. (I tried position absolute and relative, but the green width spread beneath the red div).
display: flex;because it makes
text-overflow: ellipsis;not render properly. Further read. Gotta have 'em! Otherwise I'm stuck in a very unnicely cut
display: table;because it makes
text-overflow: ellipsisnot work. Elements span out of parent too and are uncontainable.
You technically can use above things or try. If you know how to bypass the reason why they weren't working in the first place.
To makes matters worse, center vertical align needs to be automatic, not by custom value (e.g.
padding). Because each of the items within will be either bigger or smaller than the rest, they all need to align to center in their own way independantly of their neighbours.
I tried for some time, couple solutions, none work. I'm out of ideas. I call thee, DaniWeb overlords. :D
Edited by pritaeas: Updated fiddle link.