祖先元素样式：min-height:100%
这样，PC 下大部分场景，可以刚好拉伸主要部分占满屏幕； mobile 大部分场景下，祖先元素自动超出 100%的高度
这点之前一直工作得很好
但特例出现了
一个场景，需要祖先元素高度刚好 100%，不能再多，也不能更少
如果子元素内容太少，填充高度，不能减少祖先元素的高度
如果子元素内容太多，展示垂直滚动条，不能增加祖先元素的高度
chatgpt 和 claude 给的方案：flex-grow: 1; overflow-y: auto;。实际试过了，不行。其中一个例子放下面了，大家可以试着改下
也想到了两个可行方案：
[ol]
[/ol]
求教，有没有更好的方案
下面是 claude 给的一个不可行的例子
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
min-height: 100%;
flex-direction: column;
}
.content {
flex: 1;
overflow-y: auto; /* 内容超出时显示垂直滚动条 */
display: flex;
flex-direction: column;
}
.text-wrapper {
flex-shrink: 0; /* 防止内容被压缩 */
overflow-y: auto; /* 文本内容超出时显示滚动条 */
}
头部应该保持不动
这是一段测试文本。这里可以添加很长很长的文本，
当文本内容超过容器高度时，会自动出现垂直滚动条。
同时，容器高度会保持在 100%，不会被限制。
（重复文本以模拟长内容）
