I am struggling with a seemingly basic issue and can't seem to figure it out.
Basically, I have a parent element with a relative position, and a child element with an absolute position.
How can I make the parent element expand to match the height of the child element if the child has greater height?
Check out this JS Fiddle for a visual representation of what I'm trying to achieve: https://jsfiddle.net/wthwawcv/
<div class="parent">
dsfsdfsdfsdf<br>
hellow .. line 2 <br>
hello .. line 3
<div class="child">
this is the child element to be displayed
</div>
</div>
.parent {
width:100%;
background: #ff0000;
width:200px;
position: relative;
overflow: hidden;
}
.child {
width:40px;
height:100px;
background: #ffff00;
position: absolute;
right: 0;
top: 0;
}