I'm trying to build an absolutely positioned popup, which is positioned relative to a flexbox parent.
Here is a minimal extract of my html:
<div id="a" style="display: flex; position: relative; "><div id="b" style="position: relative; flex: 0 0 auto"><div id="c" style="position: absolute; top: 10px; max-width: 200px; min-width: 50px; background-color: lightblue"> The quick brown fox jumps over the lazy dog</div></div></div>What I'm trying to achieve is that the text will never exceed 200px wide. Furthermore, if it does wrap, I don't want it to end up with the minimum possible width - I want it to be as wide as possible without exceeding the 200px maximum width.
However, as you can see when the code above is run, it does collapse to the minimum possible width.
Can anyone please help me understand why this is happening? If I remove the style attribute of elements a or b, it wraps normally in the way I'd expect.
