Why does an absolutely positioned element take space in this side menu?

I am creating the following side menu with animation: click

We can see an unwanted horizontal scrollbar, which should not be according to developer.mozilla.org,

absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout.

In the example above, the list of menu appears when you click on the checkbox and it has the class .m-list. .m-list has absolute positioning and relative positioning is set for its nearest parent(.m-block). I'm going to copy and paste these two classes

.m-block {
      width: 100%;
      background: gray;
      padding: 0;
      display: flex;
      flex-direction: row-reverse;
      position: relative;
   }
   
   
   .m-list {
      position: absolute;
      top: 100%;
      background: silver;
      right: 0;
      width: auto;
      list-style-type: none; 
      transform: translateX(0%);
      transition: transform 0.25s ease-out;
   }

Q1: Why does the horizontal scrollbar appear?

Q2: What is the most correct solution to prevent the appearance of a horizontal scrollbar?

I know 4 ways to solve this problem, but due to various reasons I do not want to use them:

1. If I change the absolute position to a fixed one, it does not generate a horizontal scrollbar, but the rule line with top: 100%; takes on a different meaning. In the original case, top: 100%; provides an offset from the blue stripe along its height.

2. Using JS is not available in this project

3. Using overflow-x: hidden on the top level of document will disable the scrollbar, which may be needed for content.

4. Moving the menu from the right side to the left will not result in a horizontal bar, however, this is an undesirable solution.

   .m-list {
      ...
      left: 0;
      transform: translateX(0%);
   }
   #m-toggle:checked ~ .m-list {
      ...
      transform: translateX(-100%);
   }