I have 3 elements in a flex container
[col1-logo][col2-userdeets][col3-menu]
Via media queries, I can have col2 disappear/wrap on smaller screens when it doesn't fit, which is what I want. However - the width of col2 and col3 aren't fixed; their contents are db-generated. I could fix col2 if I had to but col3 generates it's menu from a DB..
What I want, on a large screen, is that if col3 is too wide for col2 to fit, that col2 is wrapped/hidden..
[col1-logo][col3-menu]
[col2-userdeets]
where the 2nd row would be hidden via overflow:hidden; My thought was to break up col2/col3 into their own container maybe..but I don't want that to screw up the rest of the header/media queries..? Any other idea's?
https://jsfiddle.net/koeL8z6c/3/
In this fiddle, the div.user_info should disappear if there is too many elements in the menu (or if the screen is slightly smaller, but much smaller and the user_info div is hidden and the menu is hidden and replaced with an icon)
I also realized overflow: hidden to hide it may not work so hot because of my drop down menu, which disappears obviously when overflow is hidden..
I know I could do this relatively simply with Javascript, but I'd prefer to keep it CSS only - I could figure out the submenu overflow hidden problem if only I could get the div.header_right's contents to wrap BEFORE div.header_container's content wraps..? So parent always wraps first?