前端新手求助：data-index为2-5的内容无法固定在容器内

嘿，我看了你的问题，咱们来快速搞定这个data-index为2-5的内容溢出容器的问题～

首先，这种点击后内容跑出去的情况，大概率是容器的溢出控制和定位规则没设置对，给你几个具体的调整方案：

• 第一步：给你的.js-content容器添加基础的溢出控制和定位规则，确保内部内容被限制在容器内：

  .js-content {
    position: relative; /* 让内部绝对定位的元素以这个容器为基准 */
    overflow: hidden; /* 直接裁剪超出容器的内容 */
    box-sizing: border-box; /* 避免内边距/边框撑大容器 */
  }
  

• 第二步：给内部的.article元素加上尺寸限制，防止内容本身撑破容器：

  .js-content .article {
    max-width: 100%;
    max-height: 100%;
    overflow: auto; /* 如果内容确实太长，还能让内部滚动，而不是溢出容器 */
  }
  

• 第三步：检查点击事件对应的JS代码，看看是不是点击后给容器添加了某个类，把overflow改成了visible——如果有的话，把那个类的overflow属性改成hidden就好。

这些调整应该就能把data-index为2-5的内容牢牢固定在容器里，不会再出现点击后溢出的情况啦～

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