Next.js适配@media规则时容器出现横向溢出的问题咨询

核心根因（按影响优先级排序） #

• 全局根节点强制锁死宽度：html, body 全局设置了 min-width: 1040px，无论视口尺寸如何，页面整体会始终保持至少1040px的渲染宽度，直接触发非预期的横向滚动条。
• 全局媒体查询语法完全无效：CSS不支持在@media规则块内部嵌套另一个@media规则，原代码在媒体查询块里嵌套了重复的媒体选择器，会导致整个规则块被浏览器直接丢弃，所有写在里面的覆盖规则完全不生效。
• HTML结构不符合语义规范：<ul>标签的合法直接子元素仅允许<li>，原代码在<ul>下直接嵌套<div>再包裹<li>，会触发浏览器怪异渲染模式，导致元素宽度计算时出现非预期的撑开效果。

分步修复操作 #

1. 修正全局CSS错误 #

移除嵌套的无效媒体查询，调整根节点的最小宽度逻辑，避免小屏下宽度锁死：

@import 'Fontfaces.css';

html,
body {
  cursor: url("../public/2x/cursor@2x.png"), auto;
  background-color: black;
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  min-width: 0;
  z-index: 0;
  overflow-x: hidden; /* 兜底阻断非预期横向溢出 */
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

:root{
  --brand-yellow: rgb(255, 217, 0);
}

a:active{
  color: var(--brand-yellow);
}

.glowing{
  color: #ffef2a;
  font-size: 20px;
  -webkit-animation: glow 3s ease-in-out infinite alternate;
  -moz-animation: glow 3s ease-in-out infinite alternate;
  animation: glow 3s ease-in-out infinite alternate;
}

/* 大屏下按需启用1040px最小宽度要求，不要全局强制锁死 */
@media(min-width: 1040px) {
  html, body {
    min-width: 1040px;
  }
}

/* 小屏下的规则独立编写，禁止嵌套媒体查询 */
@media(max-width:1040px){
  body {
    max-width: 100vw;
  }
}

重点说明：原代码中@media块内嵌套@media的写法是CSS规范不允许的，这是导致所有小屏媒体规则完全不生效的直接原因。

2. 修正HTML语义结构 #

调整列表结构，保证浏览器可以正确计算元素宽度：

const Home = () => {
  return (
    <>  
      <main className={containerStyles.container}>
        <Head>
          <title>Title</title>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <div className={containerStyles.column}>
          <div className={styles.main}>
            <ul>
              <li className={styles.wrapListItem}>
                <Link href="../buy"><p className={styles.listItem}>Buy</p></Link>
              </li>
              <li className={styles.wrapListItem}>
                <Link href="../doc"><p className={styles.listItem}>Documentation</p></Link>
              </li>
              <li className={styles.wrapListItem}>
                <Link href="../tos"><p className={styles.listItem}>TOS</p></Link>
              </li>
              <li className={styles.wrapListItem}>
                <Link href="../cart"><p className={styles.listItem}>Cart</p></Link>
              </li>
            </ul>
          </div>
        </div>
      </main>
    </>
  )
}

3. 调整模块CSS的宽度计算规则 #

显式给容器设置宽度值，避免依赖浏览器默认计算值导致的溢出：

.container{
  min-height: 80vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: black;
  width: 100%;
}

.column{
  width: 50%;
  display: flex;
  flex-direction: column;
}

@media(max-width:1040px){
  .container{
    transition: 1s;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    margin-right: 0px;
  }
  .column{
    transition: 1s;
    background-color: red;
    width: 100%;
    max-width: 100vw;
    margin-right: 0px;
  }
}

验证方式 #

• 打开浏览器开发者工具，选中<body>元素查看Computed面板的min-width属性，确认视口宽度小于1040px时，该值不再被强制设置为1040px。
• 逐步缩小视口宽度，确认横向滚动条消失，所有布局层级可以跟随视口宽度正常收缩。
• 查看控制台的CSS解析提示，确认之前嵌套的无效媒体查询没有被浏览器识别。

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