Stacked cards overflows into bottom div

Donald Symmons 3,066 Reputation points
2023-07-19T08:13:38.8566667+00:00

My stacked cards skips and overflows into another div tag below it. I have been trying to make it responsive and stay in its div. How can I make the cards not to overflow into the bottom div?

Here is how it skips into div below it

card skips

<style type="text/css">
         .flipcard { position: absolute; height: 100%; width: 100%; z-index: 100; transform-style: preserve-3d; }
    .innercard { position: absolute; height: 250px; width: 100%; border-radius: 15px; backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px rgba(255, 255, 255, 0.20); border: 1px solid rgba(255, 255, 255, 0.1); backface-visibility: hidden; text-align: center; font-size: 2rem; transform: translate(-50%, -50%); justify-content: center; align-content: center; }
    .innercard:nth-last-child(n + 3) { --y: calc(-5% - 25px); transform: translate(-5%, var(--y)) scale(0.95); box-shadow: 0 0 1px 1px #00000003; }
    .innercard:nth-last-child(2) { --y: calc(-5% - 10px); transform: translate(-5%, var(--y)) scale(1); }
    .innercard:nth-last-child(1) { --y: calc(-5% + 10px); transform: translate(-5%, var(--y)) scale(1.05); }

    @keyframes swap {
        50% { transform: translate(-50%, calc(var(--y) -250px)) scale(0.85) rotate(-5deg); animation-timing-function: ease-in; }
        100% { transform: translate(-50%, calc(var(--y) -15px)) scale(0.85); z-index: -1; }
    }
 </style>


<div class="subbottom" style="background-color: #011b33;">
                <br />
                <div class="col-sm-11" style="width: 100%; margin: 0 auto; padding: 5px; margin-top: 3%;">
                    <div class="row" style="margin: 0 auto; width: 100%; margin-top: 2%; margin-bottom: 0%;">
                        <div class="col-sm-9" style="margin: 0 auto; padding: 6px; color: #ffffff;">
                            <div style="margin: 0 auto; margin-top: 3%; font-family: 'Mulish', sans-serif; font-weight: 900; font-size: 7.1vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
                                <span style="margin: 0 auto;">This is the second Div header</span>
                            </div>
                        </div>
                        <div class="col-sm-3" style="margin: 0 auto; padding: 6px;"></div>
                    </div>
                    <div class="row" style="width: 100%; margin: 0 auto;">
                        <div class="col-sm-5" style="margin: 0 auto; padding: 5px; margin-bottom: 0%;">
                            <div style="line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
                                <h5 style="color: #1bb6f4;">Div Sub Header</h5>
                                <label style="color: #ffffff; font-size: 15.90px;">This section will contain detailed contents</label>
                            </div>
                        </div>
                        <div class="col-sm-1" style="margin: 0 auto;"></div>
                        <div class="col-sm-6" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 0%; text-align: center; position: relative;">
                            <div class="sect">
                                <div class="flipcard">
                                    <div class="innercard font-face">FRONT CARD 1</div>
                                    <div class="innercard font-face">FRONT CARD 2</div>
                                    <div class="innercard font-face">FRONT CARD 3</div>
                                </div>
                            </div>
                        </div>
                        <br />
                    </div>
                    <br />
                </div>
                <br />
            </div>
Developer technologies | ASP.NET | Other
0 comments No comments
{count} votes

Accepted answer
  1. QiYou-MSFT 4,326 Reputation points Microsoft External Staff
    2023-07-19T10:02:37.76+00:00

    Hi @Donald Symmons

    1.Reduce the height and assign a top value to each card.

    Hi @1.Reduce the height and assign a top value to each card.

    Code:

     <style type="text/css">
             .flipcard { position: relative; height: 50%; width: 100%; z-index: 100; transform-style: preserve-3d; }
        .innercard { position: absolute; width: 100%;height:30px; border-radius: 5px; backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px rgba(255, 255, 255, 0.20); border: 1px solid rgba(255, 255, 255, 0.1); backface-visibility: hidden; text-align: center; font-size: 2rem; transform: translate(-50%, -50%); justify-content: center; align-content: center; }
        .innercard:nth-last-child(n + 3) { --y: calc(-1% - 0.01px); transform: translate(-5%, var(--y)) scale(0.95); box-shadow: 0 0 1px 1px #00000003; }
        .innercard:nth-last-child(2) { --y: calc(-1% - 0.02px); transform: translate(-5%, var(--y)) scale(1); }
        .innercard:nth-last-child(1) { --y: calc(-1% + 0.02px); transform: translate(-5%, var(--y)) scale(1.05); }
    
        @keyframes swap {
            50% { transform: translate(-50%, calc(var(--y) -250px)) scale(0.85) rotate(-5deg); animation-timing-function: ease-in; }
            100% { transform: translate(-50%, calc(var(--y) -15px)) scale(0.85); z-index: -1; }
        }
     </style>
    
    
    <div class="subbottom" style="background-color: #011b33;">
                    <br />
                    <div class="col-sm-11" style="width: 100%; margin: 0 auto; padding: 5px; margin-top: 3%;">
                        <div class="row" style="margin: 0 auto; width: 100%; margin-top: 2%; margin-bottom: 0%;">
                            <div class="col-sm-9" style="margin: 0 auto; padding: 6px; color: #ffffff;">
                                <div style="margin: 0 auto; margin-top: 3%; font-family: 'Mulish', sans-serif; font-weight: 900; font-size: 7.1vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
                                    <span style="margin: 0 auto;">This is the second Div header</span>
                                </div>
                            </div>
                            <div class="col-sm-3" style="margin: 0 auto; padding: 6px;"></div>
                        </div>
                        <div class="row" style="width: 100%; margin: 0 auto;">
                            <div class="col-sm-5" style="margin: 0 auto; padding: 5px; margin-bottom: 0%;">
                                <div style="line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
                                    <h5 style="color: #1bb6f4;">Div Sub Header</h5>
                                    <label style="color: #ffffff; font-size: 15.90px;">This section will contain detailed contents</label>
                                </div>
                            </div>
                            <div class="col-sm-1" style="margin: 0 auto;"></div>
                            <div class="col-sm-6" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 0%; text-align: center; position: relative;">
                                <div class="sect">
                                    <div class="flipcard">
                                        <div class="innercard font-face" style="top:10px">FRONT CARD 1</div>
                                        <div class="innercard font-face" style="top:20px">FRONT CARD 2</div>
                                        <div class="innercard font-face"style="top:30px">FRONT CARD 3</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                        </div>
                        <br />
                    </div>
                    <br />
                </div>
    
    
    

    Output:

    Picture2

    2.CSS position: absolute change to position: relative

     <style type="text/css">
             .flipcard { position: relative; height: 50%; width: 100%; z-index: 100; transform-style: preserve-3d; }
        .innercard { position: relative; width: 100%;height:100px; border-radius: 5px; backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px rgba(255, 255, 255, 0.20); border: 1px solid rgba(255, 255, 255, 0.1); backface-visibility: hidden; text-align: center; font-size: 2rem; transform: translate(-50%, -50%); justify-content: center; align-content: center; }
        .innercard:nth-last-child(n + 3) { --y: calc(-1% - 0.01px); transform: translate(-5%, var(--y)) scale(0.95); box-shadow: 0 0 1px 1px #00000003; }
        .innercard:nth-last-child(2) { --y: calc(-1% - 0.02px); transform: translate(-5%, var(--y)) scale(1); }
        .innercard:nth-last-child(1) { --y: calc(-1% + 0.02px); transform: translate(-5%, var(--y)) scale(1.05); }
    
        @keyframes swap {
            50% { transform: translate(-50%, calc(var(--y) -250px)) scale(0.85) rotate(-5deg); animation-timing-function: ease-in; }
            100% { transform: translate(-50%, calc(var(--y) -15px)) scale(0.85); z-index: -1; }
        }
     </style>
    
    
    <div class="subbottom" style="background-color: #011b33;">
                    <br />
                    <div class="col-sm-11" style="width: 100%; margin: 0 auto; padding: 5px; margin-top: 3%;">
                        <div class="row" style="margin: 0 auto; width: 100%; margin-top: 2%; margin-bottom: 0%;">
                            <div class="col-sm-9" style="margin: 0 auto; padding: 6px; color: #ffffff;">
                                <div style="margin: 0 auto; margin-top: 3%; font-family: 'Mulish', sans-serif; font-weight: 900; font-size: 7.1vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
                                    <span style="margin: 0 auto;">This is the second Div header</span>
                                </div>
                            </div>
                            <div class="col-sm-3" style="margin: 0 auto; padding: 6px;"></div>
                        </div>
                        <div class="row" style="width: 100%; margin: 0 auto;">
                            <div class="col-sm-5" style="margin: 0 auto; padding: 5px; margin-bottom: 0%;">
                                <div style="line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
                                    <h5 style="color: #1bb6f4;">Div Sub Header</h5>
                                    <label style="color: #ffffff; font-size: 15.90px;">This section will contain detailed contents</label>
                                </div>
                            </div>
                            <div class="col-sm-1" style="margin: 0 auto;"></div>
                            <div class="col-sm-6" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 0%; text-align: center; position: relative;">
                                <div class="sect">
                                    <div class="flipcard">
                                        <div class="innercard font-face" >FRONT CARD 1</div>
                                        <div class="innercard font-face" >FRONT CARD 2</div>
                                        <div class="innercard font-face">FRONT CARD 3</div>
                                    </div>
                                </div>
                            </div>
                            <br />
                        </div>
                        <br />
                    </div>
                    <br />
                </div>
    
    
    

    Picture3

    Best regards,

    Qi You


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.