Hello! I want to use flex-1 on the <main>, so the content of page fills remain space. But because <nav> and footer have border-1, I see scrollbar that does not do anything, it can be moved only by 2 pixels up or down. How can I fix it?

    <div className="flex flex-col gap-y-10 h-screen">
      <nav className="w-full border-b border-gray-200">
      <div className="px-5 py-3 flex gap-10 items-center justify-between">
        <div className="text-lg font-semibold">
          Logo
        </div>
        <div className="flex gap-5">
          <Link className="text-gray-700 hover:text-blue-500 hover:underline" to="/">Home</Link>
          <Link className="text-gray-700 hover:text-blue-500 hover:underline" to="/protected">Protected</Link>
          <Link className="text-gray-700 hover:text-blue-500 hover:underline" to="/sign-up">Sign up</Link>
          <Link className="text-gray-700 hover:text-blue-500 hover:underline" to="/sign-in">Sign in</Link>
        </div>
      </div>
    </nav>
      <main className="max-w-screen-xl mx-auto w-full flex-1">
        <div>
      <h1 className="text-xl font-semibold">Home</h1>
</div>
      </main>
          <div className="h-16 w-full border-t border-gray-200">
      <div className="p-5">
        Footer
      </div>
    </div>
    </div>

https://i.stack.imgur.com/IqkwC.png