"Content" is working by removing "bx--content" from "main".
The working https://v10.carbondesignsystem.com/ doesn't seem to have "bx--content".

The following rule prevented hiding.

.bx--side-nav.bx--side-nav--expanded ~ .bx--content {
    margin-left: 16rem;
}

But I don't know if this is the correct solution.

Actually, this possibly should be OS dependent; the paradigm on Android is overlaying the content while on iOS it would be pushing it. Certain native app frameworks already switch accordingly.

(The push should not impact the width of the content, just push some of it off screen, though.)

The overlay versus push experience on Android and iOS is an interesting detail. However, when I tested the Carbon React UIShell on an iOS device, it didn't seem to implement a push effect:

I assume the flagship library tries to be consistent with OS-independent viewport-based behaviours.

If I had to choose just one behavior, I would also go with overlay. User agent/system detection code also can be messy.