html - 如何防止 div 离开屏幕？

Question

现在我有一个 div，我需要有超过 100vw 的宽度才能获得我想要的效果。我不希望 div 离开屏幕的右侧。我希望 View 保持在 100vw，没有水平滚动条。我已经尝试过 overflow: hidden; 和 overflow-x:hidden; 但它不起作用。

CSS

.stripe {
    height: 500px;
    width: 150vw;
    top: 350px;
    margin-left: -30vw;
    position: absolute;
    background-color: #4775de;
    transform: rotate(6.2deg);
    z-index: -1;
}

HTML

<div styleName='hero'>

   <div>
        <div styleName="stripe"/>    
   </div>
    <div className="container" styleName="divide-container">
       <div styleName="upper-wrapper" >
       </div>
       <div styleName="lower-wrapper" >
            <MainButtonRow/>
       </div>
    </div>
</div>

Answer 1

假设 .hero 没有填充或边距，给 .stripe 的父 div width:100%(或 100vw ) 和 overflow-x: hidden。