Flexbox 填充剩余空间

Question

我目前正在使用 flexbox 开发一个三列 UI。我需要允许包含填充屏幕上的空白空间。我正在使用：flex-direction: row;

我遇到的大多数解决方案都使用 flex-direction: column;，这在我的情况下无济于事，因为它会将设计抛诸脑后。

我在容器上设置了高度属性：height: 100%;。并已将 flex-grow: 1; 添加到所有列，但尚未扩展容器以填充剩余空间。

这就是现在的用户界面。底部的绿色是固定高度的页脚，需要在容器下方。

以下是容器 CSS（使用 react styled-components）的样子：

export const PrimaryContainerStyled = styled.div`
  background: ${({ theme }) => theme.palette.colors.surface};
  border-radius: 10px;
  border-style: none;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  color: ${({ theme }) => theme.typography.onSurface};
  display: flex;
  flex-direction: row;
  margin: 50px;
  overflow: hidden;
  height: 100%;
`;

其中一列如下所示：

export const MainColumnStyled = styled.div`
  flex-grow: 1;
  order: 2;
  border-style: none;
  box-shadow: rgba(50, 50, 93, 0.25) 10px 50px 100px -20px rgba(0, 0, 0, 0.3) 10px
    30px 60px -30px;
  color: ${({ theme }) => theme.typography.onSurface};
`;

有没有人有关于如何让容器填充空白空间但不溢出页脚的建议？