100% height for div inside another div with margins - html

Question

I have a div inside a div. The CSS/HTML is below. I am trying to figure out how to make the inner div have true height: 100%; with no overflow and what not. No matter what I try the border of the inner div gets cropped because of the outer div's overflow: hidden.
For reasons I cannot modify the content or style of either divs. I can, however, wrap the inner div in other divs if needed. This is not done through JavaScript which is why I cannot modify the outer or inner divs.
Also, this has to work in IE8.
The outer div style won't change much -- only the width, height, background-color, and margin.
The inner div could be anything. It could have a bigger border, it could have no border, it could be who knows what.
#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>

Answer 1

You can use css flex property for #wrapper
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#outer
{
width: 200px;
height: 200px;
background-color: yellow;
margin: 20px;
overflow: hidden;
position: absolute;
}
#wrapper /* adding flex */
{
display: flex;
flex-flow: column;
height: 100%;
}
#inner
{
border: 1px solid red;
height: 100%;
}
<div id="outer">
<div id="wrapper">
<div id="inner">
a
</div>
</div>
</div>
it will work on all latest browser but this won't work on IE8.

Answer 2

jsfiddle
change the #wrapper height to only 99% will solve the problem.
The reason why the inner is getting cut off because:
#inner {
height: 100%; //this means it equals to 200px
border: 1px solid red; //1px at the top border and 1px at the bottom added to the height of the #inner so now it becomes 202px, which will get cut off by overflow:hidden
}