CSS overflow属性导致水平方向出现空白，overflow-y:hidden不生效如何解决

• 属性使用逻辑错误：隐藏水平溢出需使用overflow-x: hidden，你误用了控制垂直溢出的overflow-y: hidden，自然无法达到预期效果。
• 根元素宽度设置异常：媒体查询中给html设置了width: 50%，直接导致根元素仅占一半视口宽度，剩余区域必然显示空白。
• 绝对定位导致高度计算失效：页面核心元素全部使用position: absolute脱离文档流，html/body无法正常计算内容高度，设置overflow: hidden时会直接隐藏所有超出根元素初始高度的内容，出现整屏内容消失的问题。
• 固定宽度超出视口：子元素大量使用380px、400px这类固定宽度，部分绝对定位元素的left值加自身宽度总和超过小屏视口宽度，进一步触发横向溢出。

1. 替换媒体查询中的html样式，修正溢出规则和基础尺寸：

@media screen and (min-width: 300px) and (max-width: 480px) {
  html {
    height: 100%;
    width: 100%;
    overflow-x: hidden; /* 仅隐藏水平溢出 */
    overflow-y: auto; /* 垂直溢出正常滚动 */
  }
  /* 其余原有样式保留，按下面要求修改子元素配置 */
}

2. 适配子元素尺寸，避免横向溢出：

• 将.nft-img、.description这类固定宽度的元素改为相对视口的宽度，比如设置width: 95%，水平位置用margin: 0 auto或者百分比left值控制，不要写死像素值。
• 调整底部#market、#myprofile的宽度和定位，两者总宽度不要超过100%视口宽度，比如分别设置宽度为48%，left值分别为0和52%，适配不同宽度的小屏设备。

3. 优化布局方案：减少绝对定位的使用，改用flex、常规文档流等正常布局方式排布元素，让根元素可以自动计算内容高度，避免溢出规则出现异常。

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