I have a WebView that fills up a <LinearLayout> and the overflow: auto pagination at the bottom of the page is causing a horizontal scroll to appear.

This is the HTML:

<div class="overflow-auto">
    <div class="flex">
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
        <a href="?page=1">1</a>
    </div>
</div>

On a desktop using the devtools emulating a mobile screen size everything is good. Only the pagination can be scrolled horizontally, it overflows auto. The whole body of the page doesn’t move horizontally.

But when I start it up in an Android app I have all this extra space on the right, so the whole app can scroll horizontally, which is not what I want.

Can see here it’s actually cut off where it would overflow:

But then I can scroll the whole app horizontally so it ends up like this:

Even though when selecting the element it shows up fine, doesn’t show any overflow.

Doing a display: none on the pagination fixes the issue, so it’s definitely that.

But why is it rendering all this extra whitespace like there is an overflow going on? When there clearly isn’t, even the devtools say so.