如何使flexbox子代的父代高度为100％-减去第二个子代的高度

Question

容器元素具有动态宽度：

.container {
    height: 800px; // will be dynamic
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.flex-1 {
  align-self: stretch;
  background-color: blue;
  width: 100%
}

.flex-2 {
  align-self: flex-end;
  background-color: red;
  width: 100%
  height: 50px;
}

我需要使flex-2元素位于容器的底部并具有静态高度（50px），而flex-1高度为容器的100％高度-减去flex-2元素的高度。

感谢帮助。