带有水平和垂直滚动的嵌套flex容器

Question

我有以下伸缩布局。我需要在div.content中发生溢出。我希望div.content到达页面边界，然后将其内容溢出。

是否可以在不设置静态宽度的情况下实现所需的布局？

.page-wrapper {
  display: flex;
}

.sidebar {
  background: blue;
  flex: 0 0 40px;
}

.main {
  background: green;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.topbar {
  display: flex;
  flex: 0 0 40px;
  background-color: red;
}

.content {
  display: flex;
  overflow: auto;
}

.block {
  flex: none;
  width: 200px;
  height: 200px;
}

.block:nth-of-type(odd) {
    background: rgb(0, 77, 0);
}

<div class="page-wrapper">
  <div class="sidebar">sidebar</div>
  <div class="main">
    <div class="topbar">topbar</div>
    <div class="content">
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
  </div>
</div>