Tengo un problema simple donde tengo 2 divs, 1 está en posición relativa. El elemento hijo está en posición absoluta. Este niño tiene una altura variable.

El código hasta ahora:

HTML

<div id="wrap"><div id="inner"></div></div>

CSS

#wrap {
    width: 100%;
    background: #ccc;
    position: relative;
    min-height: 20px;
}

#inner {
    width:30%;
    background: #000;
    position: absolute;
    right: 0;
    top: 0;
    height: 200px;
}

El problema que tengo es que el elemento #wrap no ajusta su altura para que coincida con el elemento hijo y, por lo tanto, el elemento hijo se cuelga fuera del borde del padre. ¿Se puede hacer esto con elementos posicionados relativos y absolutos?

Sé que esto se puede lograr con elementos flotantes y seguirlos con css => clear: ambos, pero me gustaría saber si es posible con este método.

He creado unajsfiddle de este problema por aquí si alguien quisiera ayudarme!

Muchas gracias