Text is overlapping div with using overflow:hidden-CodePudding

Hi my flexboxes div text is overlapping to an other flex container, how would I be able to fix this, I already tried adding overflow:hidden which do not seem to work. So this is my problem and this is extra text for stackoverflow's "It looks like your post is mostly code; please add some more details." problem.

.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 >
  <div >

  <div >Active Projects</div>
  <a  href="projects">
  <div >See all</div>
</a>
  </div>
  </div>
  <div >
  <div ><div id="bottom"><h2 >Lotsoftexttoshowtheoverflowhiddenproblemsopleaselookhereworld space Lotsoftexttoshowtheoverflowhiddenproblemsopleaselookhereworld</h2></div> <h5 >JUN 2022</h5>
                </div>
  <div ><div id="bottom"> <h2 >No time to live a good life</h2></div><h5 >DEC 2022</h5>
                </div>
  <div ><div id="bottom"> <h2 >I sea you</h2></div><h5 >FEB 2023</h5>
                </div>  
  <div ><div id="bottom"><h2 >FOREST</h2></div><h5 >MAY 2023</h5>
                </div>

  
</div>

CodePudding user response：

Try removing position: absolute; from .gigtitle class.

CodePudding user response：

In your stylesheet, add

 #bottom{
   position: relative;
 }

Cause in your header tag <h2 ></h2> inside this <div id="bottom"></div> tag, you've used position:absolute. Either you remove that or, add position: relative to it's parent element as I described earlier.

Then the child will be relative to its parent div. Please, learn more about "CSS Position" from here - https://www.w3schools.com/css/css_positioning.asp