What I’m trying to accomplish:

1. The yellow <div> that I set to height:100svh should actually be full viewport height

2. The page should scroll horizontally (because the <h1> text overflows)

So I want the same behavior as in desktop browsers.

The only way I can make this work is by wrapping the content in a <div> scroller:

<div id="scroller">
(yellow div with heading here)
</div>

#scroller {
overflow-x: auto;
}

https://output.jsbin.com/recagep/quiet

Why is this custom scroller necessary?