网页是 SPA
祖先元素样式：min-height:100%
这样，PC 下大部分场景，可以刚好拉伸主要部分占满屏幕； mobile 大部分场景下，祖先元素自动超出 100%的高度
这点之前一直工作得很好
但特例出现了
一个场景，需要祖先元素高度刚好 100%，不能再多，也不能更少
如果子元素内容太少，填充高度，不能减少祖先元素的高度
如果子元素内容太多，展示垂直滚动条，不能增加祖先元素的高度
chatgpt 和 claude 给的方案：flex-grow: 1; overflow-y: auto;。实际试过了，不行。其中一个例子放下面了，大家可以试着改下
也想到了两个可行方案：
- 当需要这个特例时，发个事件通知祖先元素加上：max-height:100%；当不需要时，再发个事件……
- 将这个特例作为一个单独的 url/页面，换一个 height 固定为 100%的祖先元素……
求教，有没有更好的方案
下面是 claude 给的一个不可行的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> 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; /* 文本内容超出时显示滚动条 */ } </style> </head> <body> <div class="container"> 头部应该保持不动 <div class="content"> <div class="text-wrapper"> 这是一段测试文本。这里可以添加很长很长的文本， 当文本内容超过容器高度时，会自动出现垂直滚动条。 同时，容器高度会保持在 100%，不会被限制。 （重复文本以模拟长内容） </div> </div> </div> </body> </html> 
Select Language