如何防止div离开屏幕？

Question

现在我有一个div，我需要超过100vw的宽度才能获得想要的效果。 我不需要的是div离开屏幕的右侧。 我希望视图保持在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

您可以尝试添加另一个div来包装条纹div。 并给溢出：隐藏。 请参考下面的代码。

CSS

.wrap{position:relative;
    width:100%;
    height:500px;
    overflow:hidden;
}

HTML

<div styleName='hero'>

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

Answer 2

假设.hero没有填充或边距，则给.stripe的父div width:100% （或100vw ），并overflow-x: hidden 。