Eu tenho um problema simples, onde tenho 2 divs, 1 é relativamente posicionado. O elemento filho é absolutamente posicionado. Essa criança tem altura variável.

O código até agora:

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;
}

O problema que tenho é que o elemento #wrap não ajusta sua altura para coincidir com o elemento filho e, portanto, o elemento filho fica fora da borda do pai. Isso pode ser feito com elementos posicionados relativos e absolutos?

Eu sei que isso pode ser alcançado com elementos flutuantes e segui-los com css => cleared: ambos, mas eu gostaria de saber se é possível com esse métod

Eu criei umjsfiddle deste problema aqui se alguém quiser me ajudar!

Muito obrigado