Next.js页面莫名横向溢出，疑似自定义HTML/CSS卡片所致

问题场景 #

在Next.js项目开发时，页面右侧出现无理由的横向滚动条。经测试，移除自定义HTML/CSS卡片组件后页面恢复正常，确定该卡片是问题根源。

卡片代码 #

<div className={styles.container}>
  <Row className={styles.Row}>
    <Col data-aos="flip-right" className={styles.Col} sm={'auto'} >
      <Link href="/">
        <a>
          <div className={styles.aBox}>
            <div className={styles.imgContainer}>
              <div className={styles.imgInner}>
                <div className={styles.innerSkew}>
                  <img src="./topbanner2.jpg" />
                </div>
              </div>
            </div>
            <div className={styles.textContainer}>
              <h3>Flyer</h3>
              <div>
                This is a demo experiment to skew image container. It looks good.
              </div>
            </div>
          </div>
        </a>
      </Link>
    </Col>
    <Col data-aos="flip-right" className={styles.Col} sm={'auto'} >
    </Col>
    ....
</div>

对应CSS样式 #

.Col a:hover{
  text-decoration: none;
  color: black;
}
.Row{
  width: 80%;
  margin: auto;
}
.Col{
  padding: 10px !important;
  margin: auto;
  text-align: center;
  overflow-x: hidden !important;
}
.aBox {
  display: inline-block;
  width: 240px;
  text-align: center;
  box-sizing:content-box;
}
.aBox:hover{
  .textContainer{
    border:#04bcff solid 1px
  }
}
.imgContainer {
    height: 230px;
    width: 200px;
    overflow: hidden;
    border-radius: 0px 0px 20px 20px;
    display: inline-block;
}

.imgContainer img {
  /*   transform: skew(0deg, -13deg); */
    height: 250px;
    width: 100%;
    object-fit: cover;
 /*    margin: -35px 0px 0px -70px; */
}

.innerSkew {
    display: inline-block;
    border-radius: 20px;
    overflow: hidden;
    padding: 0px;
/*     transform: skew(0deg, 13deg); */
    font-size: 0px;
    margin: 30px 0px 0px 0px;
    background: #c8c2c2;
    height: 250px;
    width: 200px;
}

.textContainer {
  border:transparent solid 1px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
  padding: 120px 20px 20px 20px;
  border-radius: 20px;
  background: #fff;
  margin: -120px 0px 0px 0px;
  line-height: 19px;
  font-size: 14px;
  transition: 0.25s border ease-in-out;
}

.textContainer h3 {
  margin: 20px 0px 10px 0px;
  color: #04bcff;
  font-size: 18px;
}

问题原因 #

1. inline-block元素的空格间隙：.aBox和.imgContainer都使用display: inline-block，HTML中元素间的换行/空格会被解析为空白字符，额外占用宽度，导致容器总宽度超出页面范围，触发横向滚动。
2. box-sizing设置不当：.aBox用了box-sizing: content-box，后续若添加内边距或边框，会直接增加元素总宽度，超出设定的240px，进而撑大容器。
3. 负margin的布局副作用：.textContainer的margin-top: -120px实现了视觉重叠，但元素仍占据文档流空间，当父容器宽度不足时，容易引发横向溢出。

解决建议 #

• 消除inline-block间隙：
  • 将.aBox的display改为block或flex，避免空白字符影响；
  • 或在父元素（如.Col）中设置font-size: 0，子元素再单独设置font-size。
• 调整box-sizing：把.aBox的box-sizing改为border-box，内边距和边框会包含在设定的240px宽度内，不会额外撑大元素。
• 优化重叠布局：用position: absolute替代负margin实现卡片重叠，给.aBox添加position: relative，再设置.textContainer为position: absolute; top: 110px; left: 50%; transform: translateX(-50%); width: 90%;，让元素脱离文档流，不影响容器宽度计算。
• 控制Col的响应式宽度：将sm={'auto'}改为具体网格宽度（如sm={6}或sm={4}，根据使用的UI框架调整），避免小屏幕下Col宽度失控。

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