nested min-height does not work

Question

I have a fixed size absolutely positioned area with scrollbars containing variable sized content.

Now I need to wrap content in two divs that are at least as large as area but expand to fit content.

<div id="area">
    <div id="outer">
        <div id="inner">
            <div id="content">content</div>
        </div>
    </div>
</div>

Requirements:

1. They need to expand, so their height must be set to auto.
2. In order to fill container their minimum size must be 100%

Therefore I've tried following CSS (full example in JsFiddle):

#area {
    /* defined outside */
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: scroll;
}

#outer, #inner {
    min-width: 100%;
    min-height: 100%;
}

It does work for #outer but has no effect on #inner. How can I fix it ?

UPDATE I'm only interested in Chrome if that helps.

Also, I can accept that it might not be possible if pointed to some authoritative source with explanation.

UPDATE 2

So I've analyzed CSS specs and concluded that my requirements can't be met:

1. For min-height to work it must be absolutely positioned or it's containing block height must not depend on content height CSS2(10.7)

2. I need autosizing so neither #inner nor #outer can be absolutely positioned. This means that containing block must have specified height.

3. Therefore #outer can't be containing block of #inner. This leaves me with #area.

4. According to CSS2(10.1) that's only possible for #inner when element is positioned absolutely which conflicts with my objective.

Answer 1

#inner using a percentage height means it is based off of the height of its parent #outer, which is not specified as an exact % or px:

#area {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding: 20px;
    box-sizing: border-box;
}

#outer,#inner {
    min-width: 100%;
    min-height: 100%;
}

#outer {
    height:100%;
    overflow: auto;
}

jsFiddle provided here, which shows with color that #inner gets the full height of #outer.

I also took a few liberties. I set your #area CSS to be a more proper full height/width setup, and i made your scrolling component #outer instead of #area, since #inner will be the content that overflows it.