我对flexbox有问题，我需要一个解决方案

Question

我把两个div放在一起，而不是每个div都有100vw，这两个div为每个div划分50%的空间，有什么解决方案吗？谢谢

页面图像

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;

Answer 1

只需将flex-none添加到具有类flex的div的子级。

.......
<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>
........