它不会影响页面大小你溢出的宽度div包含的元素
你将不得不通过使用溢出CSS属性来管理它

.app-wrapper {
  border: solid red;
  height: 25px;
}

body {
  overflow: hidden;
}

<div class="app-wrapper" style="position: relative;">
    <div class="half-hidden-element" style="
        position: absolute;
        width: 41.875vw;
        height: 41.875vw;
        left: 100%;
        background-color: black">
    </div>
 </div>

要做到这一点，需要body { overflow: hidden }和适当的计算，将一半的元素移动到视口右侧之外。
属性left,right,top,bottom描述的是相对于父元素大小的位置，而不是position: absolute元素本身。如果你想要50%的元素.half-hidden-element { width: 41.875vw }在父元素之外，你需要用41.875 / 2 = 20.9375替换它

• left: calc(100% - 20.9375vw)
• right: -20.9375vw

该代码片段在此解决方案旁边显示了使用CSS * 自定义属性 * 的解决方案。我添加了一些边界元素（需要body { overflow: auto }）来检查最终的计算结果。

/* Makes borders part of total element size */
* { box-sizing: border-box }

body { margin: 0; overflow: hidden /**/ }

.app-wrapper {
    position: relative;
}

.half-hidden-element {
    position: absolute;

/* Solution with hardcoded values */
/* Assign either left or right, not both */
/*
    width: 41.875vw;
    height: 41.875vw;

    left: calc(100% - 20.9375vw);
    right: -20.9375vw;
*/

/* solution using custom properties */
    --size: 41.875;

    width : calc(var(--size) * 1vw); /* 1vw = 1% of current viewport width */
    height: calc(var(--size) * 1vw);

    /* Half size, moved right with negative value */
/*  left : calc(100% - var(--size) / 2 * 1vw); /* either */
    right: calc(var(--size) / 2 * -1vw);       /* or     */

    background-color: black;
}

/* Just to check correct positioning (needs body to overflow) */
.half-hidden-element { display: flex }
.lft { width: 50%; height: 100%; border: 1px solid red }
.rgt { width: 50%; height: 100%; border: 1px solid green }

<div class="app-wrapper">
    <div class="half-hidden-element">
        <div class="lft">L</div>
        <div class="rgt">R</div>
    </div>
</div>

<div class="app-wrapper" style="position: absolute;">
<div class="half-hidden-element" style="
    position: fixed;    width: 41.875vw;    
    height: 41.875vw;    
    left: 75%; 
    background-color: black">
</div>