嵌套Flexbox擴展問題

Question

所以我有一個嵌套的flexbox網站佈局。第一個flexbox確保列中的3個項目保持相同的寬度，並且一個在另一個之上。

第二個是我有麻煩的地方。我想在兩個側邊欄之間有一個主箱，主箱比側邊欄大3倍。我希望它能夠縱向和橫向作出響應性的擴展，但我不知道如何將它看作一個整體。

It's meant to look like this

and the result I'm getting is more akin to this

代碼摘錄在這裏：

.flexcontainer { 
    width: 100vw; 
    max-width: 1123px; 
    min-width: 800px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    display: flex; 
    display: -webkit-flex; 
    display: -ms-flex; 
    flex-flow: column; 
    -webkit-flex-flow: column; 
    -ms-flex-flow: column; 
} 

.container { 
    width: 95vw; 
    max-width:1123px; 
    min-height: 675px; 
    min-width: 800px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    display: flex; 
    display: -webkit-flex; 
    display: -ms-flex; 
    justify-content: space-around; 
    -webkit-justify-content: space-around; 
    -ms-justify-content: space-around; 
    flex-flow: row; 
    -webkit-flex-flow: row; 
    -ms-flex-flow: row; 
    align-items: stretch; 
    -webkit-align-items: stretch; 
    -ms-align-items: stretch; 
} 

.leftcont { 
    border: #00ff00 2px solid; 
    text-align:center; 
    max-width:175px; 
    min-height: 666px; 
    position: absolute; 
    left: 0; 
    display: flex; 
    display: -webkit-flex; 
    display: -ms-flex; 
    flex-flow: column; 
    -webkit-flex-flow: column; 
    -ms-flex-flow: column; 
    flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
} 

.bodycont { 
    border: #00ff00 2px solid; 
    padding-left: 5px; 
    padding-right: 5px; 
    text-align:left; 
    min-height: 666px; 
    min-width: 465px; 
    position:absolute; 
    display: flex; 
    display: -webkit-flex; 
    display: -ms-flex; 
    flex-flow: column; 
    -webkit-flex-flow: column; 
    -ms-flex-flow: column; 
    flex: 6; 
    -webkit-flex: 6; 
    -ms-flex: 6; 
} 

.rightcont { 
    border: #00ff00 2px solid; 
    text-align:center; 
    max-width: 175px; 
    min-height: 666px; 
    position: absolute; 
    display: flex; 
    display: -webkit-flex; 
    display: -ms-flex; 
    flex-flow: column; 
    -webkit-flex-flow: column; 
    -ms-flex-flow: column; 
    right: 0; 
    flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
} 


#footercont { 
    border: #00ff00 2px solid; 
    max-width: 95vw; 
    min-width: 796px; 
    margin-left:auto; 
    margin-right:auto; 
    bottom: 0; 
    position: relative; 
    font-size: 10px; 
    color: #00ff00; 
    text-align: center; 
} 

.footer { 
    background-image: url(/images/layout/aegis-copyright.png); 
    background-repeat: no-repeat; 
    height: 18.77vw; 
    max-width: 86px; 
    max-height: 19px; 
    margin-left: auto; 
    margin-right: auto; 
} 

而且

<div class="flexcontainer"> 

<header id="header">Header</header> 

<div class="container"> 

<div class="leftcont"> 

<!--Links--> 
    <div id="navigation"></div> 
    <span> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
     <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    <a href=" ">Link</a><br /> 
    </span> 

</div><div class="bodycont"> 

<div id="bodyheader"></div> 

<br /> 
<span class="welcome"> 
Welcome message.</span> 
<p> 

</div><div class="rightcont"> 

<!--Character--> 
     <div id="character"></div> 
    <span> 

    <a href=" " class=" "><span class="name">First Name Last Name</span></a> 
    </span> 
    <span>Title</span> 

<p> 

</div></div> 

<footer id="footercont"> 
<div class="footer"></div> 
<span>Copyright</span> 
</footer> 
</div> 

如果有人能告訴我什麼，我做錯了，這將是驚人的，你我有永恆的謝意！

Answer 1

首先，刪除所有的絕對位置。沒有必要實現您的佈局。另外，絕對定位的元素忽略 flex屬性。

其次，你有許多不必要的規則，使你的代碼膨脹。你可以安全地刪除它們。

要使元素佔據連續的剩餘空間，請使用：flex: 1。

要創建框之間的空白，請使用margin。

revised codepen demo

Answer 2

您應該使用柔性成長屬性根據比例來安排

給中心DIV

flex-grow:3 

和左右容器

flex-grow:1 

這應該是有用https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow?v=control

Answer 3

只是增加了答案：不是爲了使身體容器的50％的flexbasis你可以給它一個彈性：2，而其他都是彈性：1。

.leftcont { 
    flex: 1; 
    margin: 10px 10px 10px 0; 
} 
.bodycont { 
    /* flex: 0 0 50%; */ 
    flex: 2; 
    margin: 10px 0; 
} 
.rightcont { 
    flex: 1; 
    margin: 10px 0 10px 10px; 
}