如何防止 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>

- Bill Sheng

---

你使用的ReactJS版本是什么？ - 我尝试将您的代码作为片段进行编辑，但它没有显示任何内容。 :-( - Martin

你使用的是哪个库来利用styleName属性的？我以前从未见过这种用法（快速谷歌搜索确定它是react-css-modules）。 - megamit

1. 对于混淆感到抱歉，问题并不涉及Reactjs，但我正在使用它。
2. Stylename是一个npm包，允许您将CSS模块类与样式分离。

- Bill Sheng

Answer 1

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

- megamit

Answer 2

你可以尝试添加另一个div来包装条纹div，并给予overflow:hidden。请参考下面的代码。

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>

- VvV

Answer 3

当我遇到这个问题时，将body标签中的溢出隐藏对我有用。

body {
    overflow-x: hidden;
}

- Joel