Mysterious disappearing header

[JeffEmery]

In the code below, the header mysteriously disappears on mobile. At first it was only mobile landscape, but now it's gone in portrait mode also. The entire div className="flex flex-nowrap"> doesn't appear at all on mobile. On desktop clients and in dev tools it looks correct.

Live demo: https://caller-info.vercel.app

Surely I'm doing something silly?

<div className="flex flex-col flex-nowrap h-screen max-w-screen-md m-auto">
    {/* section */}
    <div className="flex flex-nowrap">
        <div className="flex flex-grow justify-center items-center bg-gray-200 dark:bg-gray-500">
            <h1 className="pl-16 text-2xl text-gray-900 font-normal sm:text-3xl lg:text-4xl dark:text-gray-100">
                (202) 555-1212
            </h1>
        </div>
        <div className="flex-none min-w-min bg-gray-200 dark:bg-gray-500">
            <svg
                className="stroke-current text-gray-800 dark:text-gray-100 m-4 w-8 h-8 sm:w-9 sm:h-9 lg:w-9 lg:h-9"
                viewBox="-1 -1 26 26"
                xmlns="http://www.w3.org/2000/svg"
                fillRule="evenodd"
                clipRule="evenodd"
            >
                <path d="M12 0c-6.623 0-12 5.377-12 12s5.377 12 12 12 12-5.377 12-12-5.377-12-12-12zm0 1c-6.071 0-11 4.929-11 11s4.929 11 11 11 11-4.929 11-11-4.929-11-11-11zm4.828 11.5l-4.608 3.763.679.737 6.101-5-6.112-5-.666.753 4.604 3.747h-11.826v1h11.828z" />
            </svg>
        </div>
    </div>
{/* Everything below this displays normally */}
    <hr className="border-gray-900 dark:border-gray-100" />
</div>

[simonswiss]

Hey!

If this happens for you on Safari for mobile, I suspect this is because of the h-screen class. Safari mobile and vh units have known issues.

The live demo looks good on my android phone + desktop resized to any width.

[JeffEmery]

That was indeed the problem, I removed h-screen and it looks normal on the iPhone now. Thanks for the assist. I'll read more about the known issues.