next.js 容器在其内容调整为@media 规则时溢出的问题

Question

为了解决 next.js 的问题，我已经纠结了 2 天了这是我的第一个项目，我相信我错过了一些东西。

基本上，我有 3 层（参考下方边缘的 3D 视图）不想低于特定宽度 (1040px) 它里面的所有内容确实调整大小正确，但我最终有一个巨大的溢出，当然还有水平滚动。 Screenshot of the 3DView showing the issue

我尝试将@media 规则放在这些层上，但它们似乎不适用。当我尝试使这些 divs/layers 成为 {display: flex} 时，它完全破坏了网站的其余部分。

我将包括 index.js 的代码，header 和内容不是问题。

index.js

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>
      <div className={styles.wrapListItem}><Link href="../buy"><li className={styles.listItem}>   <p>Buy </p>       </li></Link></div>
      <div className={styles.wrapListItem}><Link href="../doc"><li className={styles.listItem}>   <p>Documentation</p>        </li></Link></div>
      <div className={styles.wrapListItem}><Link href="../tos"><li className={styles.listItem}>   <p>TOS</p>                  </li></Link></div>
      <div className={styles.wrapListItem}><Link href="../cart"><li className={styles.listItem}>  <p>Cart</p>                 </li></Link></div>  
      </ul>
    </div>
  </div>
  </main>
  </>
  )
  }

export default Home;

global.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: 1040px;
          z-index: 0;
          
        }
        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;
        }
        @media(max-width:1040px){
          body{
            max-width: @media(max-width:1040px){
      body{
        max-width: 100vw;
      }
    };
      }
    }

ContainerStyles.module.css

    .container{
    min-height: 80vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: black;
}
.column{
    width: 50%;
    display: flex;
    flex-direction: column;
}
@media(max-width:1040px){
    .container{
        transition: 1s;
        flex-direction: column;
        max-width: 100vw;
        margin-right: 0px;
        
    }
    .column{
        transition: 1s;
        background-color: red;
        width: auto;
        max-width: 100vw;
        margin-right: 0px;
    }
}

抱歉第一次在 Whosebug 上发帖，格式不正确

这是它在浏览器中的另一个截图。Screenshot

在此先感谢您的帮助！ PS: 1s 过渡和可怕的颜色只是为了调试，没有判断请 xoxo

Answer 1

嗯，比较有经验的朋友告诉我，加上 overflow-x: hidden 我的@media 规则 body 是正常的事情，这确实是我必须做的！

next.js 容器在其内容调整为@media 规则时溢出的问题

Issue with next.js containers overflowing when their content adjusts to @media rules

css

flexbox

responsive

next.js