Flexbox布局问题求助：两个div未各占100vw却均分空间

问题根源在于flex布局的默认特性：flex容器的子元素默认启用flex-shrink: 1，当容器总宽度不足时，子元素会自动收缩以适配容器，导致你设置的w-screen被覆盖，最终两个div均分空间。

以下是几种可行的解决方式：

方法一：禁用子元素收缩行为 #

给每个div添加Tailwind的flex-shrink-0类，强制子元素保持设定的宽度：

import type { AppProps } from "next/app";

import "./global.css";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div className="flex">
      <div className="w-screen h-screen bg-red-400 flex-shrink-0">mobile menu</div>
      <div className="w-screen h-screen bg-blue-400 flex-shrink-0">
        <Component {...pageProps} />
      </div>
    </div>
  );
}

export default MyApp;

方法二：设置子元素最小宽度为屏幕宽度 #

用min-w-screen替代w-screen，确保子元素的最小宽度为屏幕宽度，不会被压缩：

import type { AppProps } from "next/app";

import "./global.css";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div className="flex">
      <div className="min-w-screen h-screen bg-red-400">mobile menu</div>
      <div className="min-w-screen h-screen bg-blue-400">
        <Component {...pageProps} />
      </div>
    </div>
  );
}

export default MyApp;

方法三：允许容器横向滚动 #

给flex容器添加overflow-x-auto，让页面可以横向滚动，方便查看两个div的完整内容：

import type { AppProps } from "next/app";

import "./global.css";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div className="flex overflow-x-auto">
      <div className="w-screen h-screen bg-red-400">mobile menu</div>
      <div className="w-screen h-screen bg-blue-400">
        <Component {...pageProps} />
      </div>
    </div>
  );
}

export default MyApp;

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