CSS:flexbox和scroll？

我的代码：

CSS:

我的问题：

红色部分aside1的底部被“单击我”按钮隐藏，下面是我希望它的样子： 蓝色部分aside2内容的底部是隐藏的，即使我们滚动到底部，我希望它是这样的： 我可以得到一个固定高度的结果，但这不是一个灵活的解决方案

---

谢谢大家!

问题：我看不到导航栏，点击我就隐藏了？？？，忘了导航栏吧…我也不明白你说的隐藏是什么意思，你希望它是什么样子？我添加了一些图片来展示我希望它是什么样子。

html, body
  height: 100%
  line-height: 1.5

.wrap
  height: 100vh
  display: flex

main
  flex: 1
  display: flex
  @media (max-width: 800px)
    flex-direction: column    

h1
  margin-top: 0

aside
  flex: 1
  background: #f7f7f7 
  overflow-y: hidden 
  height: 100vh
  position: relative

article
  flex: 2
  background: #f0eeee  
  padding: 2em;
  overflow-y: scroll

#aside1
    background: tomato
    height: 100%;
    overflow-y: auto;

#aside2
    background: #bbb
    position: absolute
    top: 100vh
    transform: translate(0, -50px)
    width: 100%
    height: 100%
    transition: all .4s

#aside2.show
    top: 0;
    transform: translate(0, 0)

#aside2-head
    padding: 0 .5em
    height: 50px
    background: #bbb
    cursor: pointer
    h1
      text-align: center;

#aside2-content
    padding: 2em
    background: darkblue
    height: 100%
    overflow-y: auto