Text going outside of div Bootstrap-CodePudding

I am little new in HTML and bootstrap. I am facing weird issue in my website.

<div >
    <div >
        <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://via.placeholder.com/500x500/"  alt="Happy New Year 2023" width="100%" height="100%">
        </a>
    </div>
    <div >
        <div >
            <h5 >નુતન વર્ષ 2023 ની શરૂઆત </h5>
            <div >
                <div >
                    <div >
                        <div >
                            <p >નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
                        </div>
                        <div >
                            <p >nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div >
                <div >
                    <h6 ><a  href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
                    <p ><small>1 day ago</small></p>
                </div>
                <div >
                    <span ><img src="https://stag.example.com/assets/images/copy.png"  alt="share quote" width="24" height="24"></span>
                    <a href="https://stag.example.com/gu/post/happy-new-year-2023-68400"><img src="https://stag.example.com/assets/images/share.png"  alt="share quote" width="24" height="24"></a>
                </div>
            </div>
        </div>
    </div>
</div>

and I have CSS like below

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-front {
    background:rgba(240, 240, 240, 0.99);
    color:#000;
    font-weight:600;
}
.flip-card-back {
  color:#000;
  transform: rotateY(180deg);
  background:rgba(240, 240, 240, 0.99);
  font-weight:600;
}

I have marked that in DESKTOP its showing perfect text but in mobile its going outside of parent div like this image

in DESKTOP its looking perfect like this image

I have not added any mobile specific CSS. I have added code in codeplay for debug it.

I have also marked that if I remove flip-card div and put text, its working fine. I am using bootstrap 5.2.

Let me know if someone here can help me to correct it.

Thanks!

CodePudding user response：

It seems that the text has absolute positioning which takes it out of flow, therefore the parent is not adjusting to contain it.

Assuming that the goal is to contain the text in flip-card and keep both sides stacked together, perhaps try use grid display on flip-card-inner and place the 2 sides in the same cell, instead of absolute positioning:

.flip-card-inner {
  /*