Html 当主容器为水平伸缩箱时，伸缩箱收缩主容器

我想为我的SPA创建一个简单的布局，其中有一个标题组件，应该一直显示。页脚组件，应该位于屏幕底部，或者如果主内容组件大于屏幕，则应该位于内容组件下方。还有一个主内容组件，如果屏幕比内容大，它应该获得剩余的空间，因此页脚组件在底部呈现

目前，我已经复制了我的布局在这。但是如果你把代码笔的结果窗口缩得足够小的话，我就看不到Test2文本了，因为页脚组件在它上面。我期望的行为是，我可以看到Test2文本，并且能够向下滚动到页脚组件

如果内容组件不是具有

flex-direction:row

的flex-box，则它可以工作。你知道为什么这样不行吗

在我的SPA中，我使用React，所以我不想为此使用任何JavaScript

*{
填充：0；
保证金：0；
字号：2rem；
}
.第页{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
宽度：100%；
背景：黄色；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
弹性：1；
溢出：滚动；
}
梅因先生{
弹性：1；
背景：红色；
显示器：flex；
弯曲方向：行；
最小高度：30px；
}
.测试{
显示：块；
}
.页脚{
背景：绿色；
}

标题
主要的
测试1
测试2

页脚

我让它工作了。我需要添加一个带有

display:block的div围绕我的内容，我添加了
对内容进行调整：之间的空格到我的容器组件。有点黑，但它的工作

这是我的最终代码：


*{
填充：0；
保证金：0；
字号：2rem；
}
.第页{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
宽度：100%；
背景：黄色；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
弹性：1；
证明内容：之间的空间；
溢出：滚动；
}
.街区{
显示：块；
}
梅因先生{
背景：红色；
显示器：flex；
弯曲方向：行；
}
.测试{
显示：块；
}
.页脚{
背景：绿色；
}

标题
主要的
测试1
测试2

页脚
只需将flex:10自动添加到.main类。Flex属性包括Flex增长、Flex收缩和Flex基础。因此，对于0，它被告知不要收缩


*{
填充：0；
保证金：0；
字号：2rem；
}
.第页{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
宽度：100%；
背景：黄色；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
弹性：1；
溢出：滚动；
}
梅因先生{
弹性：10自动；
背景：红色；
显示器：flex；
弯曲方向：行；
最小高度：30px；
}
.测试{
显示：块；
}
.页脚{
背景：绿色；
}

标题
主要的
测试1
测试2

页脚