I am facing an issue with a nested div structure in my HTML/CSS code. The inner div is getting cropped due to the overflow hidden property of the outer div, and I need to find a solution to set the inner div's height to 100% without any overflow.
Unfortunately, I do not have the flexibility to modify the content or style of either divs directly. However, I can wrap the inner div within additional divs if necessary, but this needs to be achieved without using JavaScript.
In addition, it is crucial that this problem is solved in a way that is compatible with IE8.
The style of the outer div may vary slightly in terms of width, height, background color, and margin.
As for the inner div, it could have different border sizes, no border at all, or other unique attributes.
#outer
{
width: 200px;
height: 200px;
background-color: yellow;
margin: 20px;
overflow: hidden;
position: absolute;
}
#wrapper
{
height: 100%;
}
#inner
{
border: 1px solid red;
height: 100%;
}<div id="outer">
<div id="wrapper">
<div id="inner">
a
</div>
</div>
</div>