When position: absolute; divs are placed inside or around a position: relative; parent, their height and width are based on the size and length of the text they contain.
However, if one of these divs extends beyond the right border of the relative parent, its width seems to get truncated.
Is there a way to make the overflowing div behave like the others, using only CSS? (This should be compatible with all major browsers including Edge, but not IE)
Here is the link to the fiddle, and I will also include the code + screenshot below:
HTML:
<div id="relative">
<div id="absolute-working-left">
My width and height are determined by my text content.
</div>
<div id="absolute-working-middle">
Mine too.
</div>
<div id="absolute-problem">
Except me... I am having an issue because my width gets cut off when I extend beyond the right side of my 'relative' parent. WHY???
</div>
</div>
...and the styles. Please note that I want the maximum width of the absolute div to be 200px before wrapping. Otherwise, the width should be determined by the length of the text:
#relative {
position: relative;
width: 100px;
height: 100px;
margin-left: 300px;
background-color: white;
}
#absolute-problem,
#absolute-working-left,
#absolute-working-middle {
position: absolute;
top: 45px;
font-size: 12px;
max-width: 200px;
}
#absolute-working-left {
background-color: lightblue;
left: -300px;
}
#absolute-working-middle {
background-color: lightgreen;
}
#absolute-problem {
background-color: red;
left: 80px;
}
This problem came up while working on a tooltip that needed to be positioned in relation to an offsetParent (or the body if no offsetParent is found in its DOM branch).
Edit: How can this desired behavior be achieved using only CSS?
The solution must be compatible with all major browsers including Edge, excluding IE. It's important to note that the width of the absolute divs cannot be predetermined as it needs to adjust based on the text length... with the exception of a max-width set to 200px in this scenario.