html - 嵌套 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