滚动条无法在嵌套的flex div中工作

Question

我真的很难在Angular 2下工作（它似乎在html / css试用版网站上运行良好）并且我无法理解我做错了什么所以帮助非常感谢。

我试图创建一个带有顶部菜单栏和侧栏的全窗口页面，其中包含图像标题和位于其下方的可滚动内容。像这样：

＆＃13;

＆＃13;

body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column;
  min-height: 20px;
  max_height: 100vh;
  height: 100vh;
  overflow-y: hidden;
}

.mainDiv {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  max-height: 100%;
  height: 100%;
  flex: 1 1 auto;
}

.sideDiv {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: hidden;
  width: 300px;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  background: blue;
}

.logoDiv {
  flex: 1 1 auto;
  flex-flow: column;
  background: yellow;
}

.scrollableDiv {
  min-height: 0;
  max-height: 100%;
  height: 100%;
  flex: 1 1 auto;
  flex-flow: column;
  overflow-y: scroll;
  background: red;
}

.menu {
  flex: 1 1 auto;
  flex-flow: column;
  background: cyan;
}

＆＃13;

<div align="left" class="mainDiv">
  <div class="menu">This is where the menu goes</div>
  <div class="sideDiv">
    <div class="logoDiv">Image at top of sidebar</div>
    <div class="scrollableDiv">
      Scrollable content
      <br> bla
      <br> bla
      <br> bla
      <br> bla
      <br> bla
      <br> bla
      <br> bla
      <br> bla
      <br> bla
      <br> bla
      <br> bla
      <br> bla
      <br>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我遇到的问题是，当我缩小浏览器窗口时，而不是在嵌套的＆＃34; Scrollable内容中获取滚动条＆＃34; div，我在主浏览器窗口中找到一个：

如果整个侧边栏都可以滚动，我可以使它工作但我希望标题图像在下面的内容之上保持静止。

谁能告诉我我做错了什么？