Place element at the bottom of div overflow

I'm trying to place an element at the bottom (5px) of a div which is inside of another div and has overflow set to auto. So when it's bigger than the parent div, the scroll bar appears.

I also need to place a button at the bottom of the inner div, so it stays at the bottom, therefore I set position:relative to the div and position:absolute to the button.

It works fine when the div is not bigger than the outer div, but when it has overflow, the button does not stay at the bottom of it, but rather has a position of 5px from the bottom of the outer div, and when I scroll the overflown div, it scroll with it. It's easier to see here:
Fiddle link

    <div class="mainDiv">
        <div class="innerDiv">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <button class="btn">Edit</button>
        </div>
    </div>
    <br>
    <div class="mainDiv">
        <div class="innerDiv">
            <p>Short text.</p>
            <button class="btn">Edit</button>
        </div>
    </div>
    .mainDiv {
        border: 1px solid green;
        width: 200px;
        height: 200px;
    }
    .innerDiv {
        border: 1px solid red;
        background: lightcoral;
        max-height: 200px;
        height:100%;
        overflow: auto;
        position:relative;
    }
    .btn {
        position:absolute;
        bottom: 5px;
    }
}

How can I solve this so that the button is always 5 px from the bottom of the inner div when it's overflowing and at the same time 5 px from the bottom of the outer div when the text is short?
https://dl.dropboxusercontent.com/u/10039660/whatiwant.png Furthermore, I'm looking for a solution which wouldn't explicitly set the height of the part of the div above buttons about 70% because my buttons might have variable heights (from 20px to 200px). Many thanks.