Absolute positioned div breaks on relative parents edge - html

Question

I am experiencing some trouble while positioning an absolute div inside a relative one. I want my absolute div (inline-block) to grow until it reaches a given px-amount (max-width). This works as expected, until I add a width (smaller than the max-width of the absolutes div) to the relative div.
I want the text in the absolute-div to break at the max-width (400px) and not at the edge of the relative parent div (300px).
When giving white-space: nowrap, the words just flow over the absolute divs end.
Have anyone an idea how to solve this?
Thanks!
See:
http://codepen.io/anon/pen/KVJvmZ
html
<div class="relativeContainer">
<div class="absoluteContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
This should stay small.
</div>
</div>
css
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
display: inline-block;
position: absolute;
top: 0;
left: 0;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}

Answer 1

I am afraid it is not possible to solve this issue with your markup. But there is light at the end of the tunnel: You could change your markup or use javascript to achieve what you want.
Depending on your requirements, this could help you: http://codepen.io/anon/pen/eJXYOJ
html
<div class="relativeContainer">
<div class="absoluteContainer">
<div class="contentContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
<div class="contentContainer">
This should stay small.
</div>
</div>
</div>
css
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
position: absolute;
width: 100vw; /* do a large number of px for ie8 compatibility*/
top: 0;
left: 0;
background-color: lightgray; /* just to show you what I've done*/
}
.contentContainer {
display: inline-block;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}

Answer 2

Absolute container is directly related to the relative parent container.
There is no way to make an absolute container bigger (width or height) than a relative parent container.
If you want an absolute container bigger (width or height) than his parent the parent should not be relative.
Hope this help.
Have a good one

Answer 3

I don't think what you want to do is possible without using another class, or using JS. Here's how you can do it with css:
<div class="relativeContainer">
<div class="absoluteContainer bigger">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
This should stay small.
</div>
</div>
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
display: inline-block;
position: absolute;
top: 0;
left: 0;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
.absoluteContainer.bigger{
width: 400px;
}

Answer 4

I have looked at your example and I don't think you can do what you want if the absolute is inside the relative and you don't specify a width. Currently, with only a max-width, the inner absoluteContainer has no reason to go outside the relative container so it won't. Once you set a width, you get what you want but the small cannot stay small! You might be able to 'spoof' what you want by locating the absolute outside the relative but in the same location. This gives you something of what you want - but it won't (say) scroll the relative one if the absolute is bigger.
Example at: http://codepen.io/anon/pen/Nxovey
If you don't want to (or can't) identify longer text in CSS with extra classes then this is the best you can do without javascript.
Code:
<div class="spoofContainer">
<div class="absoluteContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
<div class="relativeContainer">
</div>
<div class="spoofContainer">
<div class="absoluteContainer">
This should stay small.
</div>
</div>
<div class="relativeContainer">
</div>
CSS:
.spoofContainer {
width: 400px;
height: 0px;
overflow: visible;
position: relative;
}
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
display: inline-block;
position: absolute;
top: 0;
left: 0;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}