Prevent child of "position: relative" from shrinking when going out of bounds

Issue

I have two elements - a parent with position: relative and a child with position: absolute and max-width. The problem is that the child shrinks instead of going out of bounds.

Here is a simple example and a JSFiddle:

#outer {
  position: relative;
  width: 400px;
  height: 400px;
  border: 4px solid red;
  margin: 0 auto;
}

#inner {
  position: absolute;
  left: 300px;
  top: 0;
  max-width: 240px;
  border: 4px solid blue;
}

I want the child to naturally stretch to 240px, instead of shrinking. Setting a fixed width is not an option, because there might be a child with very little content - https://jsfiddle.net/9re34o0j/1/.

Solution

Using width: max-content we can make it overflow from that position. I hope this is what you want:

#outer {
  position: relative;
  width: 400px;
  height: 400px;
  border: 4px solid red;
  margin: 0 auto;
}

#outer>div {
  position: absolute;
  left: 300px;
  top: 0;
  max-width: 240px;
  border: 4px solid blue;
  
  width: max-content;
}

#outer>.inner2 {
  top: 2rem;
}

<div id="outer">
  <div class="inner1">
    Lorem
  </div>
  <div class="inner2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answered By - the Hutt