Make CSS max-width larger than parent

Question

https://jsfiddle.net/d3yns9b6/ shows how max-width doesn't work when I want to set it to something larger than the containing element.

Since it's absolutely positioned it should be able to extend outside the containing element. If I set an exact value using width it works but then both pieces of text in the example are exactly that width.

I want them both to take up as little width as they need, up to a maximum of the amount I set (even if it exceeds the parent container).

.out {
  position: relative;
  width: 200px;
  height: 400px;
  background-color: blue;
}

.in {
  position: absolute;
  max-width: 600px;
  background-color: yellow;
}

<div class="out">
  <div class="in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
  </div>
  <div class="in" style="margin-top:300px">
    Lorem
  </div>
</div>

Answer 1

This is the logical behavior of absolute element where their width obey to the shrink-to-fit algorithm thus they cannot exceed the available width of their containing block.

the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width). ^ref

One idea is to increase the available width by increasing the padding since absolute element consider the padding-box then you can apply negative margin to compensate the padding added.

.out {
  position: relative;
  width: 200px;
  padding-right:400px; /*width + padding = 600px (equal to max-width)*/
  margin-right:-400px;
  height: 400px;
  background-color: blue;
  background-clip:content-box; /* We don't show the background on the padding*/
}

.in {
  position: absolute;
  max-width: 600px;
  background-color: yellow;
}

<div class="out">
  <div class="in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
  </div>
  <div class="in" style="margin-top:300px">
    Lorem
  </div>
</div>

In this case the padding is not really needed since it's a block element but it can be useful when dealing with inline elements.

Example:

.out {
  position: relative;
  display:inline-block;
  width: 200px;
  padding-right:400px; /*width + padding = 600px (equal to max-width)*/
  margin-right:-400px;
  height: 300px;
  background-color: blue;
  background-clip:content-box; /* We don't show the background on the padding*/
}

.in {
  position: absolute;
  max-width: 600px;
  background-color: yellow;
}

.extra {
  display:inline-block;
  background:red;
  vertical-align:top;
  margin-top:100px;
}

<div class="out">
  <div class="in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
  </div>
  <div class="in" style="margin-top:200px">
    Lorem
  </div>
</div>
<div class="extra">
  some content here 
</div>

Answer 2

Well, when no width is provided, it will fall back to auto, meaning it will use the width given by the parent element, regardless of absolute positioning or any max-width. So you need to specify any width, using percentage or relative units like vh or vw.

.out {
  position: relative;
  width: 200px;
  height: 400px;
  background-color: blue;
}

.in {
  position: absolute;
  width: 500%;
  max-width: 600px;
}

.in > span {
  background-color: yellow;
  display: inline-block;
}

<div class="out">
  <div class="in">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.</span>
  </div>
  <div class="in" style="margin-top:300px">
    <span>Lorem</span>
  </div>
</div>

Answer 3

You need to set the width with width and constrain it with max-width.

Something like this:

.in {
  position: absolute;
  width: 100vw;
  max-width: 600px;
  background-color: yellow;
}