如何垂直拆分两个容器并让它们在Flexbox中滚动？

Question

所以我试图完成以下任务：

我的顶部有一个全宽/设置高度工具栏，flex-grow: 0，下面有第二个容器flex-grow: 1。这似乎有效，直到我抛出两个粘在应用程序右侧的可滚动容器。

我似乎无法让两个“可滚动”区域执行与height: 50%; overflow: hidden; overflow-y: scroll类似的操作。

有关如何使用Flexbox完成此布局的任何想法？

Answer 1

这是一个例子

JS Fiddle

以下是html和css

的示例

HTML

<div class="wrapper">
<header> This is my header</header>

<div class="boxMain">main</div>
<div class="side">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
</div>

</div>

CSS

header {
  min-height: 40px; 
  background: pink;
}

.wrapper {
  width: 100%;
  background: black;
}

.side {
  width: 30%;  
  height: 375px;
  float: right;
}

.boxMain {
  width: 70%;
  height: 300px;
  background: red;
  display: inline-block;
}

.box1 {
  width: 100%;
  background: yellow;
  height: 40%;
}

.box2 {
 width: 100%;
 background: blue;
 height: 40%;
}

参考图片