CSS -ms-flex box model layout

Question

Could someone help me figure out why the wrapper with the red box in the background isn't the full 100% height filling the container html, body - the layout should be elastic so if you were to remove the paragraphs in the article it should all fit in the same window perfectly. if you know of a webkit or moz attribute that might work there might be an alternative in -ms-flex - let me know leave a message thanks, also you need to view this in IE10 fiddle here

css:

    html, body
    {
        height:100%; min-height:100% !important; background-color:#000; margin:0px; display:-ms-flexbox; -ms-flex:1
    }

    .wrapper
    {
        display:-ms-flexbox; -ms-flex-flow:column; -ms-flex-align:stretch; -ms-flex-item-align:center; width:100%;  background-color:#f00; min-width:1000px
    }
    .wrapper
    {
        -ms-flex:1; -ms-flex-direction:column; height:100%; 
    }
    header
    {
        height:140px; background-color:#ff6a00; min-width:1000px; 
    }
    footer
    {
        height:140px; background-color:#b6ff00; min-width:1000px;
    }
    #header, #footer, #body
    {
        max-width:1000px;
    }
    #header, #footer
    {
        margin:auto
    }
    #body
    {
        background-color:#0ff; -ms-flex:1 auto; display:-ms-flexbox; -ms-flex-item-align:center; width:100%
    }
    #body > nav
    {
        width:200px; background-color:#ae12ed; 
    }
    #body > article
    {
        background-color:#4cff00; -ms-flex:1; 
    }
    #body > aside
    {
        width:200px; background-color:#ff0a28
    }
    header
    {
        display:-ms-flexbox
    }
    #header
    {
        display:-ms-flexbox;
        -ms-flex-flow:row;
        -ms-flex:1; background-color:#fc7705
    }
    #header > div
    {
        background-color:#313131; -ms-flex:1
    }
    #header > #logo-menu
    {
        -ms-flex:4;
        display:-ms-flexbox; -ms-flex-direction:column
    }
    #header > #login-search
    {
        -ms-flex:2;
        display:-ms-flexbox; -ms-flex-direction:column; -ms-flex-item-align:center           
    }
    #logo
    {
        background-color:#5205f8; -ms-flex-direction:row; -ms-flex:1 
    }
    #menu
    {
        background-color:#0e04ff; height:50px
    }
    #login
    {
        background-color:#15a10f; -ms-flex-item-align:end; padding:8px
    }
    #search
    {
        background-color:#d0cc16; -ms-flex-item-align:end 
    }

html:

<div class="wrapper">
    <header>
        <div id="header">
            <div id="logo-menu">
                <div id="logo">Logo</div>
                <div id="menu">Menu</div>
            </div>
            <div id="login-search">
                <div id="login">Login</div>
                <div id="search">Search bar</div>
            </div>
        </div>
    </header>
    <div id="body">
        <nav>Nav</nav>
        <article>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
            <p>Article</p>
        </article>
        <aside>Aside</aside>
    </div>
    <footer>
        <div id="footer">
            Footer
        </div>
    </footer>
</div>

Answer 1

If you crop the html code to this, I see that the red wrapper is full in the background. If I got it wrong, more detailes would help. The footer was just covering the rest of it.

Hope it helps.

html, body
        {
            height:100%; min-height:100% !important; background-color:#000; margin:0px; display:-ms-flexbox; -ms-flex:1
        }

        .wrapper
        {
            display:-ms-flexbox; -ms-flex-flow:column; -ms-flex-align:stretch; -ms-flex-item-align:center; width:100%;  background-color:#f00; min-width:1000px
        }
        .wrapper
        {
            -ms-flex:1; -ms-flex-direction:column; height:100%; 
        }
        header
        {
            height:140px; background-color:#ff6a00; min-width:1000px; 
        }
        footer
        {
            height:140px; background-color:#b6ff00; min-width:1000px;
        }
        #header, #footer, #body
        {
            max-width:1000px;
        }
        #header, #footer
        {
            margin:auto
        }
        #body
        {
            background-color:#0ff; -ms-flex:1 auto; display:-ms-flexbox; -ms-flex-item-align:center; width:100%
        }
        #body > nav
        {
            width:200px; background-color:#ae12ed; 
        }
        #body > article
        {
            background-color:#4cff00; -ms-flex:1; 
        }
        #body > aside
        {
            width:200px; background-color:#ff0a28
        }
        header
        {
            display:-ms-flexbox
        }
        #header
        {
            display:-ms-flexbox;
            -ms-flex-flow:row;
            -ms-flex:1; background-color:#fc7705
        }
        #header > div
        {
            background-color:#313131; -ms-flex:1
        }
        #header > #logo-menu
        {
            -ms-flex:4;
            display:-ms-flexbox; -ms-flex-direction:column
        }
        #header > #login-search
        {
            -ms-flex:2;
            display:-ms-flexbox; -ms-flex-direction:column; -ms-flex-item-align:center           
        }
        #logo
        {
            background-color:#5205f8; -ms-flex-direction:row; -ms-flex:1 
        }
        #menu
        {
            background-color:#0e04ff; height:50px
        }
        #login
        {
            background-color:#15a10f; -ms-flex-item-align:end; padding:8px
        }
        #search
        {
            background-color:#d0cc16; -ms-flex-item-align:end 
        }

<div class="wrapper">
        <header>
            <div id="header">
                <div id="logo-menu">
                    <div id="logo">Logo</div>
                    <div id="menu">Menu</div>
                </div>
                <div id="login-search">
                    <div id="login">Login</div>
                    <div id="search">Search bar</div>
                </div>
            </div>
        </header>
        <div id="body">
            <nav>Nav</nav>
            <aside>Aside</aside>
        </div>
    </div>