文本重叠div使用溢出:隐藏

Question

嗨，我的flexboxesdiv文本重叠到另一个flex容器，我如何能够解决这个问题，我已经尝试添加溢出:隐藏似乎不起作用。所以这是我的问题，这是额外的文字为stackoverflow的"看起来你的帖子主要是代码;请补充更多的细节。问题。

.d-flex {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 100%;/*can edit as per requirement*/
}

.d-flex .col {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section2{
margin-bottom: 19px;
margin-top: 19px;
}
.sectionact{
margin-top: 19px;
}
.d-flex p {
padding: 0 1rem;
}
.block{
width: 300px; 
height:200px;
background-color:#191919;
border-radius:60px;
padding: 21px;
}
.flex-total {
display: flex;
flex-wrap: wrap;
max-width: 100%;
}

.flex-total .boxo {
background-color: #191919;
flex: 0 0 100%;
max-width: 100%;
margin: 10px;
width: 100%;
min-width: 235px;
text-align:left;
padding: 20px;
font-size: 30px;
border-radius:40px;
min-height: 200px;
height: 228px;

overflow:hidden;
padding: 27px;
}

@media (min-width: 1030px){
.flex-total .boxo {
flex: 0 0 51%;
max-width: 46%;
width: 100%;
min-width: 20%;
height: 345px;
} }
.activegig1{
background-image: url(../images/laat.jpg)!important;
background-size: cover;
background-position: center;
}
.activegig2{
background-image: url(../images/laato.jpg)!important;
background-size: cover;
background-position: center;
}
.activegig3{
background-image: url(../images/laatoo.jpg)!important;
background-size: cover;
background-position: center;
}
.activegig4{
background-image: url(../images/laatooo.jpeg)!important;
background-size: cover;
background-position: center;
}
.dategig{
font-family: 'latoblack', Arial, sans-serif;
font-weight: 900;
color: #dadada;
font-size: 47%;
align-self: flex-end;
margin: 0 !important;
display:flex;
text-shadow: 3px 3px 10px black;
}
.gigtitle{
font-family: 'lato', Arial, sans-serif;
font-weight: 900;
color: #fff;
font-size: 65%;
text-shadow: 3px 3px 8px black;
position: absolute;
display: flex;
text-align: right;
margin: 0;

}
#bottom{
width: 100%;
height: 100%;
justify-content: end;
display: flex;
flex-wrap: wrap;
flex-direction: column;
text-align: left;
}

<div class="d-flex sectionact">
<div class="col">
<div class="sectiontitleactive">Active Projects</div>
<a class="nounderline" href="projects">
<div class="seeall">See all</div>
</a>
</div>
</div>
<div class="flex-total">
<div class="boxo activegig1 textgig"><div id="bottom"><h2 class="gigtitle">Lotsoftexttoshowtheoverflowhiddenproblemsopleaselookhereworld space Lotsoftexttoshowtheoverflowhiddenproblemsopleaselookhereworld</h2></div> <h5 class="dategig">JUN 2022</h5>
</div>
<div class="boxo activegig2 textgig"><div id="bottom"> <h2 class="gigtitle">No time to live a good life</h2></div><h5 class="dategig">DEC 2022</h5>
</div>
<div class="boxo activegig3 textgig"><div id="bottom"> <h2 class="gigtitle">I sea you</h2></div><h5 class="dategig">FEB 2023</h5>
</div>  
<div class="boxo activegig4 textgig"><div id="bottom"><h2 class="gigtitle">FOREST</h2></div><h5 class="dategig">MAY 2023</h5>
</div>

</div>

Answer 1

尝试将position: absolute;从.gigtitle类中移除

Answer 2

在样式表中添加

#bottom{
position: relative;
}

因为在你的标题标签<h2 class="gigtitle"></h2>在这个<div id="bottom"></div>标签，你已经使用了position:absolute。要么删除它，要么像我之前描述的那样将position: relative添加到它的父元素。

则子div将相对于其父div。请了解更多关于CSS位置的信息。从这里- https://www.w3schools.com/css/css_positioning.asp