Make CSS max-width larger than parent - html

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

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 2

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

Answer 3

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>