Flexbox строки для использования верхнего меню и гибкого нижнего содержимого

Question

Как мне сделать так, чтобы все элементы помещались в элемент контейнера, фиксированный по размеру окна?

У меня есть элемент контейнера с фиксированной позицией и flexbox, он не остается в пределах окна. Меню размером 50px, и я хочу, чтобы основной элемент заполнил оставшуюся часть высоты окна.

У меня есть контейнер my-app и внутри него 2 вертикально сложенных элемента (flex-direction = column). Он работает как положено в Chrome, но не в Edge или Firefox.

my-app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

app-menu {
  border-bottom: 2px solid black;
  width: 100%;
  height: 50px;
  background: lightcoral;
  box-sizing: border-box;
}

app-my-view {
  display: flex;
  flex: 1;
  width: 100%;
  background: lightgreen;
}

https://stackblitz.com/edit/2-column-scroll-v2

У меня все работает, используя меню с фиксированным положением, придерживающееся вверху и используя отступы для смещения высоты меню в основной области содержимого. Однако я подумал, что было бы лучше использовать подход с двумя сложенными элементами без использования фиксированного меню.

Смотрите здесь: https://stackblitz.com/edit/2-column-scroll-v1