嵌套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; 
}