Как мне сделать макет flexbox (2 строки - (2 столбца и 1 столбец)) с полной шириной vis js внутри?

Question

Я создаю макет из трех блоков - два горизонтально соединенных и один под ними обоими. Моя цель - создать гибкий макет, чтобы все было пропорционально и соответствовало размеру используемого экрана (без прокрутки). Самый большой нижний блок будет иметь холст (vis js - должен соответствовать 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>

Я думаю, я злоупотребляю использованием дисплея: flex. Во всяком случае, по крайней мере, сейчас работает. Спасибо, ребята !!

Answer 2

Использовать вложенные flex-box .

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>