div box height auto virker ikke

<style type="text/css">
.framed-box {
    position: relative;
    display: inline-block;
    width: 200px;
    padding: 25px;
    border: 1px solid red;
}
.framed-box div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.framed-box div.top {
    height: 20px;
    bottom: auto;
    right: 20px;
    background: yellow;
}
.framed-box div.right {
    width: 20px;
    left: auto;
    bottom: 20px;
    background: green;
}
.framed-box div.bottom {
    height: 20px;
    top: auto;
    left: 20px;
    background: blue;
}
.framed-box div.left {
    width: 20px;
    right: auto;
    top: 20px;
    background: silver;
}
</style>

<div class="framed-box">
    INDHOLD!!<br>
    INDHOLD!!<br>
    INDHOLD!!<br>
    INDHOLD!!<br>
    INDHOLD!!<br>
    INDHOLD!!<br>
    INDHOLD!!<br>
    INDHOLD!!<br>
    <div class="box-frame">
        <div class="top"></div>
        <div class="right"></div>
        <div class="bottom"></div>
        <div class="left"></div>
    </div>
</div>