c# – 使用flexbox第3列向左推动的3列流体布局

一些背景资料：
我在c#ASP.NET中设计.所以我的HTML里面有一些代码,这样就可以轻松(对我来说)使用主布局来实现可变内容.基本上只有菜单点击的内容更改,其余的在整个网站保持不变.

.MainContainer{
display: flex;
flex-direction: column;
border-style: solid; /*Debugging purposes*/
}

.ContentContainer{
width: 100%;
fill:aliceblue;
display: flex;
flex-direction: row;
border-style: solid; /*Debugging purposes*/
}

.header{
width: 100%;
height: 15%;
text-align: center;
border-style: solid; /*Debugging purposes*/
}

.footer{
width: 100%;
height: 15%;
text-align: center;
border-style: solid; /*Debugging purposes*/
 }

.navbar{
display: flex;
width: 15%;
align-self: stretch;
align-items: center;
flex-direction: column;
padding:2px;
margin: 10px;

min-width: 15%;

border-style: solid; /*Debugging purposes*/
 }

.content{
display: flex;
align-self: stretch;
width: 95%;
padding:10px;
margin: 10px;
text-align: justify;

min-width: 90%;
overflow:hidden;

border-style: solid; /*Debugging purposes*/
}

.aside{
display: flex;
width: 15%;
align-self: stretch;
align-items: center;
flex-direction: column;
margin: 10px;
padding: 10px;

min-width: 15%;

border-style: solid; /*Debugging purposes*/
}

HTML编码：

<div class="header">This is the Header space</div>

<div class="ContentContainer">
    <nav class="navbar">
        <a href="Home.aspx">Home</a>
        <a href="About.aspx">About</a>
        <a href="Contact.aspx">Contact</a>
    </nav>

<%--    start of variable content--%>
    <form id="form1" runat="server">
        <div class="content">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

            </asp:ContentPlaceHolder>
        </div>
    </form>
<%--    end of variable content--%>

    <div class="aside">Content Area for Latest items.</div>
</div>

<div class="footer">Tis is the Footer space</div>

问题在于：每当有一个空页时,它都不会保持所需的宽度.旁边的div将尽可能向左推.
此外,它看起来像标题高度和页脚高度不占用屏幕尺寸的15％.

任何指向正确方向的指针？
提前致谢