div with unspecified width (absolute positioning)
Try adding:
white-space: nowrap;
in your fixed positioned div. Beware, though, that this solution will not cause the lines to wrap when the div is smaller than the window's width.
Block-level elements expand vertically to hold their content, but expand horizontally to fill their container. Since you're using absolute positioning though, the semantics of "filling the container" change a bit.
Normally browsers will attempt to fill the remaining horizontal space of the browser if the width hasn't been specified (or when width is 'auto', the default width), so what you're describing sounds peculiar. It seems most likely that something else is interfering with the element to cause that behavior (e.g., a relatively or absolutely positioned element somewhere in the parent chain).
I would try to debug this by seeing if you can replicate the behavior with a root-level div (if you're not already), to eliminate the chance of parent elements causing issues.
On the absolutely positioned element, add:
display: table;
.rel {
position: relative;
background-color: rgb(85 85 85 / 20%);
}
.abs {
position: absolute;
background-color: rgb(0 255 0 / 50%);
}
.table {
display: table;
}
.fixed {
position: fixed;
background-color: rgb(3 169 244 / 46%);
}
div {
font: 14px italic, sans-serif;
border-radius: 5px;
margin: 1em;
padding: 1.5em;
font-style: italic;
border: 3px solid rgba(155, 155, 155, .4);
}
p {
font-style: normal;
}<div class="rel">(Relative Positioning)
<div class="abs table">(Absolute Positioning; Display "table")
<div class="fixed">(Fixed Positioning)<br/>
<strong>Self-Sizing Popout Content</strong>
<p>The width of this block expands based on content size, and escapes the bounds of its parent, yet its starting position is based on its location in the containing parent. This method of positioning can be used for popups that need to be anchored
in a particular spot. </p>
<div class="rel">(Relative Positioning)
<div class="abs table">(Absolute Positioning; Display "table")<br/>
<div class="fixed">(Fixed Positioning)
<p><strong>
Now we're getting ridiculous
</strong><br/> A popup in a popup.<br/> This box expands based<br/> on content height & width.
</p>
</div>
</div>
</div>
</div>
</div>
</div>