Why doesn't the left sticky position work when the scroll container is the body?

I've tested this with the scroll container being a div and being the body, and when the container is the body, the sticky position doesn't work properly. It seems to me that the only sticky that works on the body is the top: 0, but I am trying to apply the left: 0. I still want to use the body as the scroll container because if I use a div container, the mobile's functionalities won't work (e.g. hiding the search bar when scrolling down). These are the tests:

Body as the container, doesn't work properly

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="margin: 0">
        <div style="background-color: blue; height: 100px; position: sticky; left: 0">
            TEST
        </div>
        <div style="height: 1000px; width: 1000px; background-color: red">
            TEST
        </div>
</body>
</html>

Div as the container, works properly

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="margin: 0">
    <div style="height: 100dvh; overflow: auto">
        <div style="background-color: blue; height: 100px; position: sticky; left: 0">
            TEST
        </div>
        <div style="height: 1000px; width: 1000px; background-color: red">
            TEST
        </div>
    </div>
</body>
</html>

Solution

Building on the answer by @TemaniAfif, it seems that if you style the body with both overflow: auto and contain: layout, the horizontal stickiness works as expected.

body {
  margin: 0;
  overflow: auto;
  contain: layout;
}

<div style="background-color: blue; height: 100px; position: sticky; left: 0">
  TEST
</div>
<div style="height: 100px; width: 1000px; background-color: red">
  TEST
</div>

Use with caution, though ... I don’t have any experience with strong containment, so I have no idea what negative side-effects this may have.

Another potential implementation, rather than having the body do the horizontal scrolling, would be to have the red element do it. Then you wouldn’t need to use sticky positioning on the blue element or containment control on the body. The body can still take care of the vertical scrolling, but each section takes care of its own horizontal scrolling.