如何为div添加滚动条？隐藏body滚动条后main div不显示滚动条无法滚动

按优先级排查以下配置项即可解决：

• 首先校验body基础配置：需确保body设置了overflow: hidden; height: 100vh; margin: 0; padding: 0;，保证body本身占满视口高度，且不会自身产生滚动条，也不会挤占主div的显示高度。
• 检查主div的高度与溢出属性：必须给主div设置明确的固定高度/视口高度，例如height: 100vh，不能使用内容自适应高度，同时配置overflow-y: auto; overflow-x: hidden;，只有当内容高度超过容器自身的设定高度时，滚动条才会触发显示。
• 排查父级元素样式限制：检查主div的所有父级元素是否存在overflow: hidden配置，或者父级元素高度小于主div的设定高度，导致主div的溢出内容被父级提前截断，无法触发滚动。
• 校验样式是否被覆盖：打开浏览器开发者工具，选中主div元素查看「计算样式」面板，确认overflow-y的最终生效值为auto或scroll，排除全局样式重置、第三方UI库的样式覆盖问题。
• flex布局特殊处理：如果主div是flex容器的子项，需要额外给主div添加min-height: 0属性，flex布局默认不会收缩子项内容，会导致即使内容溢出也不会触发滚动条。

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