i have a problem with flexbox and i need a solution-CodePudding

I put two divs next to each other, instead of them having 100vw each, the two are dividing 50% of the space for each one, is there any solution? Thanks.

Page Image

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">mobile menu</div>
      <div className="w-screen h-screen bg-blue-400">
        <Component {...pageProps} />
      </div>
    </div>
  );
}

export default MyApp;

CodePudding user response：

Just add flex-none to childs of div with class flex.

.......
 <div className="flex">
    <div className="w-screen h-screen bg-red-400 flex-none">mobile menu</div>
    <div className="w-screen h-screen bg-blue-400 flex-none">
        <Component {...pageProps} />
    </div>
</div>
........