绝对定位侧边菜单水平滚动条成因及合规解决方案咨询

我正在制作一个带滑动动画的右侧侧边菜单，目前遇到了一个问题——页面出现了多余的水平滚动条，这和MDN中关于绝对定位的描述冲突：

absolute
元素会脱离正常文档流，且页面布局不会为该元素预留空间。

菜单的核心实现逻辑：点击复选框显示带有.m-list类的菜单列表，该元素为绝对定位，其最近的父元素.m-block设置了相对定位。相关CSS代码如下：

.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;
}

问题1：为何会出现水平滚动条？ #

原因在于transform仅改变元素的视觉位置，不会修改它的布局占位范围。尽管.m-list是绝对定位元素（脱离文档流），但当菜单处于隐藏状态时（通常通过transform: translateX(100%)将其移至视口右侧外），浏览器计算页面滚动范围时，会把该元素transform后的视觉边界包含进去，导致页面总宽度超出视口宽度，从而触发水平滚动条。

问题2：阻止水平滚动条出现的最优合规解决方案是什么？ #

最优方案是给.m-block（菜单的相对定位父容器）添加overflow-x: hidden属性，代码修改如下：

.m-block {
  width: 100%;
  background: gray;
  padding: 0;
  display: flex;
  flex-direction: row-reverse;
  position: relative;
  overflow-x: hidden; /* 添加这一行 */
}

这样设置后，菜单被transform移到父容器右侧外的部分会被父容器裁剪，不会溢出到页面视口外，既不会影响页面正常的水平滚动需求，也能保留top:100%相对于父容器的定位逻辑，完全符合原需求。

已知不可采用的4种方案 #

• 将absolute改为fixed：虽能消除滚动条，但top:100%的参考对象变为视口而非.m-block，破坏了菜单相对于顶部条带的定位逻辑。
• 使用JS方案：项目限制无法采用。
• 在文档顶层设置overflow-x: hidden：会禁用页面正常的水平滚动功能，影响其他内容展示。
• 将菜单移至左侧：不符合右侧菜单的需求，相关修改代码如下：

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

内容的提问来源于stack exchange，提问作者PavelDev