Vertical scroll appearing only on mobile devices - css

Question

I'm using React + Tailwind to build a website.
On desktop and mobile widths in the browser (emulating mobile device using Chrome dev tools), the website looks perfectly fine.
It's only when I load it from my mobile phone (iPhone) that a vertical scroll bar appears.
I've tried removing anything that might be causing it from the CSS including
display: flex and min-height:100vh but nothing is getting rid of the scroll.
Why is the vertical scroll only appearing on my actual mobile device, but not the Chrome emulator and how can I debug it?
App.jsx
function App() {
return (
<div className="min-h-screen flex flex-col">
<Router>
<Navbar />
<Routes>
<Route exact path="/" element={<Login />} />
</Routes>
</Router>
</div>
);
}
Login.jsx
const Login = (props) => {
return (
<div className="flex flex-col flex-1 items-center justify-center ">
<form onSubmit={handleSubmit}>
<div className="">
<input
type="email"
value={emailVal}
onChange={(e) => setEmailVal(e.target.value)}
/>
</div>
<button
onClick={handleSubmit}
className=""
>
Submit
</button>
</form>
</div>
);
};
UPDATE
I noticed removing
className="min-h-screen flex flex-col" from App.jsx actually gets rid of the scroll, but this also removes the ability to expand the container to the full height of the screen and center the content in the middle.