div with unspecified width (absolute positioning)

Question

I\'ve got an absolutely positioned div I\'m working with, and I put some text inside of it just to be able to find it on the page, namely:

Answer 1

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;
}

(Relative Positioning)
  
(Absolute Positioning; Display "table")
    
(Fixed Positioning)

      Self-Sizing Popout Content
      
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. 
      
(Relative Positioning)
        
(Absolute Positioning; Display "table")

          
(Fixed Positioning)
            

Now we're getting ridiculous

 A popup in a popup.
 This box expands based
 on content height & width.