Div元素是页面水平溢出，而父元素不是

Question

我有一个div，它包含我网页上的一些信息。我遇到了一个问题，当窗口变小时，div的一部分会从页面上裁剪下来。

注意事项：我的CSS中有我的身体元素overflow-x: hidden;

溢出页面的元素包含父元素。但是，父元素不会溢出页面。

在此处查看我的代码https://codepen.io/Tech-World/pen/ExLgNZq

下面添加的代码：

scrollTo (0, 800)

body {
overflow-x: none;
}
.homepage-info {
position: absolute;
top: 1100px;
width: 100vw;

}
.why-heading {
text-align: center;
}
.info-blocks {
background-color: rgb(29, 31, 29);
height: 100px;
padding: 500px;
position: relative;
top: 50px;
padding-bottom: 300px;
max-width: 100%;
}
.info-block {
text-align: center;
background-color: rgb(204, 204, 204);
color: white;
width: 25%;
height: 200px;
padding: 30px;
margin: 50px;
border-radius: 10px;  
}


#affordable {
position:absolute;
bottom: 500px;
left: 1245px;
}
#real-code {
position:absolute;
top: 400px;
left: 650px;
}
#in-person {
position:absolute;
bottom: 500px;
left: 40px;
}
#code-line-1 {
color: white;
position: absolute;
bottom: 825px;
left: 43.5%;
}
#code-line-2 {
color: white;
position: absolute;
bottom: 800px;
left: 35.5%;
}

<div class="homepage-info">
<h1 class="why-heading">Scroll down and shrink your window size</h1>
<div class="info-blocks">
<div class="fade-out info-block right-align " id="affordable">
<h2>Salve</h2>
<p>Test</p>
</div>
<div class="fade-out info-block left-align" id="real-code">
<h2>Hola</h2>
<p>Test</p>
</div>
<div class="fade-out info-block right-align" id="in-person">
<h2>Dobro</h2>
<p>Test</p>
</div>
</div>

Answer 1

查看下面的链接以获取修订后的代码。https://codepen.io/nandujasthi/pen/zYjKzJz

div的左侧以像素表示，其中包含元素的绝对位置。相反，您可以使用百分比使其在所有设备中高效工作。请检查链接

body {
overflow-x: none;
}
.homepage-info {
position: absolute;
top: 10%;
width: 100vw;
left: 0;
}
.why-heading {
text-align: center;
}
.info-blocks {
background-color: rgb(29, 31, 29);
height: 100px;
padding: 500px;
position: relative;
top: 5%;
padding-bottom: 300px;
max-width: 100%;
}
.info-block {
text-align: center;
background-color: rgb(204, 204, 204);
color: white;
width: 25%;
height: 200px;
padding: 30px;
margin: 50px;
border-radius: 10px;  
}
#affordable {
position:absolute;
top: 5%;
right: 10%;
}
#real-code {
position:absolute;
top: 45%;
left: 33%;
}
#in-person {
position:absolute;
bottom: 500px;
left: 10%;
}
#code-line-1 {
color: white;
position: absolute;
bottom: 825px;
left: 43.5%;
}
#code-line-2 {
color: white;
position: absolute;
bottom: 800px;
left: 35.5%;
}

<div class="homepage-info">
<h1 class="why-heading">Scroll down and shrink your window size</h1>
<div class="info-blocks">
<div class="fade-out info-block right-align " id="affordable">
<h2>Salve</h2>
<p>Test</p>
</div>
<div class="fade-out info-block left-align" id="real-code">
<h2>Hola</h2>
<p>Test</p>
</div>
<div class="fade-out info-block right-align" id="in-person">
<h2>Dobro</h2>
<p>Test</p>
</div>
</div>


</div>