如何使用全宽 visjs 制作 flexbox 布局（2 行 - （2 列和 1 列））？

Question

我正在创建一个包含三个框的布局 - 两个水平连接，一个在它们下方。 我的目标是拥有一个 flex 布局，以便所有内容都成比例并适合所用屏幕的大小（无滚动）。 最大的下部框将有一个画布（visjs - 应该适合 100% 的宽度）。

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

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

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

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

Answer 1

使用嵌套的flex-boxes 。

 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>

Answer 2

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

 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>

我认为，我滥用了 display: flex 的使用。 无论如何，至少现在正在工作。 谢谢你们！！