如何制作内部带有全宽 visjs 的弹性框布局(2 行 - (2 列和 1 列))？

Question

我正在创建一个包含三个框的布局，其中两个框水平连接，一个框在它们下面。我的目标是有一个灵活的布局，这样一切都是成比例的，适合所用屏幕的大小(不滚动(。最大的、较低的盒子将有一块画布(visjs-应该适合100%的宽度(。

左框的高度由内部内容控制，其宽度是行的百分比。

底部的框应填满剩余的高度。

所有框加在一起应该填满页面的屏幕(换句话说，没有滚动选项(。

--------------
| L% |    R    |
--------------
|              |
|    CANVAS    |
|    vis.js    |
|              |
--------------

Answer 1

首先，非常感谢您的评论。结合这里提出的两个答案，我找到了一个适合我需求的解决方案。

html, body {
font-family: Roboto, "Helvetica Neue", sans-serif;
padding: 0;
margin: 0;
height: 100%;
}
.outer {
display: flex;
flex-flow: column;
height: 100vh;
border: 2px dashed blue;
}
header {
display: flex;
}
header .top-left {
display: flex;
flex-basis: 20%;
border: 2px dashed green;
justify-content: center;
text-align: center;
}
header .top-right {
display: flex;
flex: 1;
border: 2px dashed red;
vertical-align: center;
justify-content: center;
align-items: center;
}
main {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
border: 2px dashed fuchsia;
}

<div class="outer">
<header>
<div class="top-left"> a </div>
<div class="top-right"> b </div>
</header>
<main> c </main>
</div>

我认为，我滥用显示器的使用：柔性。不管怎样，至少现在正在工作。谢谢大家！！

Answer 2

使用嵌套的弹性框。

html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
min-height: 100%;
background: #eee;
display: flex;
flex-flow: column nowrap;
}
header {
display: flex;
}
header .top-left {
background-color: rgba(255,0,0,0.2);
flex-basis: 20%;
}
header .top-right {
background-color: rgba(0,255,0,0.2);
flex: 1;
}
main {
background-color: rgba(0,0,255,0.2);
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.indicator {
line-height: 1;
text-align: center;
font-size: 2rem;
color: #666;
margin: 1rem;
padding: 1rem 2rem;
border: 1px solid #aaa;
}

<header>
<div class="top-left">
<p class="indicator">L_20%</p>
</div>
<div class="top-right">
<p class="indicator">R</p>
</div>
</header>
<main>
<p class="indicator">CANVAS<br>vis.js</p>
</main>