我如何制作具有全角visjs的flexbox布局（2行-（2列＆1列））？

Question

我正在创建一个包含三个框的布局-两个水平连接，两个都在下面。我的目标是拥有一个灵活的布局，以便所有内容都成比例并适合所用屏幕的大小（不滚动）。下方最大的盒子会有一个画布（visjs-应该适合宽度的100％）。

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

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

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

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

Answer 1

此链接是否回答了您的问题？ https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height

Answer 2

使用嵌套的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);
  width: 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: 3rem;
  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>