📌 问题背景

在最近的 uni-app（微信小程序）项目开发中，遇到了一个让人非常头疼的灵异 bug： 一个详情页，外层使用了 flex 布局（height: 100vh），中间部分使用 <scroll-view> 占满剩余空间（flex: 1），内部包含了轮播图、富文本以及动态加载的瀑布流组件。

症状表现： 页面滑动的时候，“有时候滚不动，有时候又滚得动”，甚至在用力滑动时会触发整个页面的橡皮筋回弹，导致 <scroll-view> 内部的滚动彻底卡死失效。

🕵️‍♂️ 原因排查与分析

经过一番排查，发现这根本不是 js 逻辑的问题，而是极其经典的 CSS 盒模型与 Flex 布局高度计算冲突！

为什么会时而滚得动，时而卡死？

1. 我们的外层容器 .hot-detail-page 设置了 height: 100vh 和 display: flex。

2. <scroll-view> 设置了 flex: 1，意图是让它占满剩下的高度。

3. 致命点在于：当 <scroll-view> 内部的内容（特别是富文本和瀑布流这种按需加载、高度动态变化的内容）瞬间撑大时，由于移动端 Webview 的渲染机制，<scroll-view> 本身的高度也会被强行撑开，超出了屏幕的可视区域（100vh）。

4. 这时候，你手指滑动触发的其实是页面的原生滚动（甚至触发了 iOS 的橡皮筋回弹），而不是 <scroll-view> 的内部滚动。内外两个滚动机制一打架，页面就直接卡死了。

🛠️ 终极解决方案

要彻底解决这个问题，不需要写任何 JS 监听，只需要两行 CSS 代码，用物理手段把 <scroll-view> 锁死在 Flex 容器里。

修改前的 CSS（错误示范）：

.hot-detail-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-scroll {
  flex: 1; /* 试图占满剩余空间，但会被内部元素撑爆 */
}

修改后的 CSS（正确示范）：

.hot-detail-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* 👇 新增1：彻底锁死外层页面的原生滚动，防止上下橡皮筋回弹干扰 */
  overflow: hidden; 
}

.page-scroll {
  flex: 1;
  /* 👇 新增2：核心修复！强制 scroll-view 重新计算高度 */
  height: 0; 
  width: 100%;
}

💡 原理小科普

为什么加一个 height: 0 就神奇地好了？

在 Flex 布局中，当我们给一个子元素同时加上 flex: 1 和 height: 0 时，意思是告诉浏览器/小程序引擎： “不要管里面装了多少东西，你的基础内容高度就是 0，然后老老实实根据 flex: 1 把父级剩下的空间占满就行。”

这样一来，<scroll-view> 就有了一个绝对固定且受限的高度，无论内部的瀑布流怎么动态加载、富文本有多长，都无法撑爆外层容器。此时，<scroll-view> 的内部滚动机制（scroll-y）就能 100% 完美生效了，再也不会出现滚动冲突！

📝 总结

在移动端开发中，但凡遇到 Flex 布局 + scroll-view 的组合，尤其是内部含有高度不确定的动态组件时，请养成肌肉记忆： 👉 外层容器加 overflow: hidden; 👉 scroll-view 必须加 flex: 1; height: 0;

希望这篇避坑笔记能帮到你！如果觉得有用，欢迎点赞收藏~ 👍