为何设置overflow: hidden后div元素仍可滚动？

结合你提供的代码，以下是几种常见原因及排查方向：

• 全局滚动而非容器滚动
  你的.myDiv设置了min-height:100vh，但如果子元素总高度超过视口，.myDiv会被撑开至超过100vh的高度。此时如果body或html没有设置overflow:hidden，浏览器会显示全局滚动条，看起来像是.myDiv在滚动，实际是页面整体在滚动。
  排查：打开浏览器开发者工具，查看.myDiv的实际高度是否超过了视口高度，同时检查body/html的overflow属性。

• Flex布局导致容器高度不受限
  作为flex容器，.myDiv的flex-direction:column会让它默认根据子元素高度自动扩展。min-height:100vh只是设置最小高度，当子元素总高度超过100vh时，容器高度会被撑大，此时overflow:hidden无法裁剪超出视口的部分（因为容器本身已经超过视口）。
  解决尝试：把min-height:100vh替换为height:100vh，强制容器高度固定为视口高度；或者给子元素添加flex-shrink:1，让它们自动收缩以适应容器高度。

• 子元素定位层级问题
  如果.imgBx或.post内部有使用position:absolute的元素，且这些元素的定位父级不是.myDiv（比如嵌套了其他position:relative的元素），那么.myDiv的overflow:hidden无法裁剪这些绝对定位的内容，导致内容超出容器后触发滚动。
  排查：检查子元素的定位设置，确保需要被裁剪的绝对定位元素的直接父级是.myDiv。

• CSS样式被覆盖
  可能存在其他CSS规则（比如带有!important的样式）覆盖了.myDiv的overflow:hidden属性。
  排查：用浏览器开发者工具查看.myDiv的计算样式，确认overflow属性是否确实为hidden。

内容的提问来源于stack exchange，提问作者Zombani