IRCCloud | Mac App , Win App and Linux app

I display an app drawer-like component in my mobile web app where I use bottom navigation icons with more which opens additional options.

1. Slides up/down into/out of the view
2. Has full screen height
3. Vertically aligns items at the bottom
4. Displays N options/per row (unlike attached image which only has one option per row)
5. Is placed within the same position: fixed container at the bottom of the screen as the main bottom navigation.

My options drawer should animate similar to what can be seen on this iOS animated GIF

https://jsfiddle.net/LL4dst15/

My drawer is using flexbox (as you can see from the example) where it aligns elements to flex-end on cross axis to display them at the very bottom. But the problem is the navigation container which is fixed positioned and has such z-index that it gets displayed over the content at all times.

If I use translateY the drawer actually slides in/out as it should, but drawer element's position doesn't change which means that navigation container still has the height of the drawer + bottom bar. This can be seen in my fiddle example on the left where the gray element is always seen. This would therefore cover my actual content so users would have difficulties interacting with it.

I could however use pointer-events: none; but I consider this a rather ugly hack that may have problematic browser support. So I would like to avoid it.

If I use max-height instead of transformations, then navigation container actually does resize when drawer resizes. The problem with this approach is that drawer doesn't seem to slide up/down, but rather folds as blinds... The reason is cross axis alignment to flex end. If I'd align to flex start then it would seem as if it's sliding out.

I was trying to resolve this one with auto margins, but couldn't seem to make it work, so that I would have flex start cross axis alignment but using auto margins to push content to the bottom of the drawer. No luck...

Do you have any other suggestions how should I do CSS so that my drawer would slide and my container would also resize?