使用滚动嵌套弹性框

Question

我遇到的情况是我使用弹性框来创建填充父容器中剩余空间的容器。这种行为需要发生在彼此嵌套的多个div上，以及这些div中的其他内容。当它的底部被切断时，最里面的div需要滚动。我在这里提供了一个简单的HTML和样式示例：

.drawer {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100px;
}
.header {
  height: 100px;
}
.main {
  flex: 2;
  display: flex;
  flex-flow: column;
}
.content {
  flex: 2;
  display: flex;
  flex-flow: column;
}
.text {
  flex: 2;
  overflow-y: auto;
}

<div class="drawer">
  <div class="header">
    <h2>Header</h2>
  </div>
  <div class="main">
    <div class="navigation">
       Navigation
    </div>
    <div class="content">
      <div class="controls">
        Controls
      </div>
      <div class="text">
        Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
      </div>
    </div>
  </div>
</div>

使用此HTML，具有“text”类的div需要独立滚动。它没有。但是，如果我删除带有“content”类的div，则文本div会独立滚动。不幸的是，“内容”div在我的实际情况中是必要的，所以我想知道是否还有另一种方法来实现这个目标？