100% height for div inside another div with margins

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>

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.