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

我通过使用固定位置的菜单粘贴到顶部并使用填充来抵消主要内容区域中的菜单高度来使其工作。但是我认为最好是在不使用固定菜单的情况下使用具有2个堆叠元素的方法。

参见此处：https://stackblitz.com/edit/2-column-scroll-v1