I am trying to build a header component using FlexBox. This is a picture of what I'm trying to achieve:
The red box is a flexbox. The green boxes are each <div> elements within the flexbox. The right-most element (labeled 3) has a click event connected to it. The idea is when that box is clicked, a menu pops up immediately below it, but not within it.
I've tried using absolute and relative positioning of div's 3 and 4, but no combination is achieving what I'm looking for. The best I have been able to do is to use absolute positioning on div 4. It pops up separate from div 3, as intended, but the width of div 4 won't grow larger than div 3, and the content wraps.
How can I have a popup element in div 4 that takes it's width from its own content, and doesn't wrap?