html - Why has wrapping my nested elements to cause shrinking of the tiles? - Stack Overflow

admin管理员组

文章数量:1344646

I had some stacked up tiles which I wanted to wrap up with an outter container .schedule which I have done successful.

I also have some tiles lined up at the bottom holding same info, and wanted to wrap these with the same outter container .schedule, but have failed. for some reason it seems to have shrunk everything nested inside.

I followed the same methodology of changing the #contentContainerTopLeft .event-header to #contentContainerTopLeft .schedule and thought it would work for #contentContainerBottom .event-header to #contentContainerBottom .schedule

The approach worked work #contentContainerTopLeft but failed for #contentContainerBottom

Am I missing something here? Where do I need to check and look? In need of expert advice. Attached is Before and After screenshots with before and after codes.

Any help and advice or solution would be greatly appreciated and many thanks in advance.

Before Wrapping with .schedule After wrapping with .schedule

/* ==========================
✅ BEFORE Top-Left Container - Vertical Layout
========================== */
#contentContainerTopLeft {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 85vh;
    width: 30vw;
    background-color: #222;
    padding: 5px;
    box-sizing: border-box;
}
    #contentContainerTopLeft .event-tile {
        max-width: 100%;
        font-size: calc(1rem + 0.3vw); /* Adjust font size dynamically */
        overflow-wrap: break-word; /* Prevent overflow */
        flex: 1; /* This makes each tile grow equally */
        min-height: 0; /* Allows flex items to shrink below their content size */
        position: relative; /* Needed for absolute positioning inside */
        margin: 2px 0; /* Adjust spacing between tiles */
    }

    #contentContainerTopLeft .event-header {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }
    /* ==========================
✅ AFTER Top-Left Container - Vertical Layout
========================== */
#contentContainerTopLeft {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 85vh;
    width: 30vw;
    background-color: #222;
    padding: 5px;
    box-sizing: border-box;
}
    #contentContainerTopLeft .event-tile {
        max-width: 100%;
        font-size: calc(1rem + 0.3vw); /* Adjust font size dynamically */
        overflow-wrap: break-word; /* Prevent overflow */
        flex: 1; /* This makes each tile grow equally */
        min-height: 0; /* Allows flex items to shrink below their content size */
        position: relative; /* Needed for absolute positioning inside */
        margin: 2px 0; /* Adjust spacing between tiles */
    }

    #contentContainerTopLeft .schedule {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }
    /* ==========================
✅ BEFORE Bottom Container - Single Row Layout
========================== */
#contentContainerBottom {
    display: flex;
    position: relative; /* Ensure child elements can be positioned absolutely */
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch; /* Ensure all tiles are same height */
    height: 15vh;
    width: 100vw;
    background-color: #333;
    padding: 5px;
    box-sizing: border-box;
}
    #contentContainerBottom .event-tile {
        width: auto;
        max-width: 100%;
        font-size: calc(1rem + 0.3vw); /* Adjust font size dynamically */
        overflow-wrap: break-word; /* Prevent overflow */
    }

    #contentContainerBottom .event-header {
        display: flex;
        position: relative;
        width: 100%;
        flex-direction: column; /* Align children vertically */
        justify-content: space-around; /* Distribute children evenly */
        align-items: center; /* Center children horizontally */
        height: 100%; /* Ensure it takes the full height of the parent */
    }
    /* ==========================
✅ AFTER Container - Single Row Layout
========================== */
#contentContainerBottom {
    display: flex;
    position: relative; /* Ensure child elements can be positioned absolutely */
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch; /* Ensure all tiles are same height */
    height: 15vh;
    width: 100vw;
    background-color: #333;
    padding: 5px;
    box-sizing: border-box;
}
    #contentContainerBottom .event-tile {
        width: auto;
        max-width: 100%;
        font-size: calc(1rem + 0.3vw); /* Adjust font size dynamically */
        overflow-wrap: break-word; /* Prevent overflow */
    }

    #contentContainerBottom .schedule {
        display: flex;
        position: relative;
        width: 100%;
        flex-direction: column; /* Align children vertically */
        justify-content: space-around; /* Distribute children evenly */
        align-items: center; /* Center children horizontally */
        height: 100%; /* Ensure it takes the full height of the parent */
    }

<!-- BEFORE WRAPPING WITH schedule Please refer to example screenshot-->
<div id="contentContainerTopLeft">
        <div class="event-tile vertical-tile tile-past">
            <div class="event-header"></div>
        </div>
        <div class="event-tile vertical-tile tile-current">
            <div class="event-header"></div>
        </div>
</div>

<div id="contentContainerBottom">
        <div class="event-tile vertical-tile tile-past">
            <div class="event-header"></div>
        </div>
        <div class="event-tile vertical-tile tile-current">
            <div class="event-header"></div>
        </div>
</div>


<!-- AFTER WRAPPING WITH schedule Please refer to screenshot of after effect-->
<div id="contentContainerTopLeft">
    <div class="schedule visible">
        <div class="event-tile vertical-tile tile-past">
            <div class="event-header"></div>
        </div>
        <div class="event-tile vertical-tile tile-current">
            <div class="event-header"></div>
        </div>
    </div>
</div>

<div id="contentContainerBottom">
    <div class="schedule visible">
        <div class="event-tile vertical-tile tile-past">
            <div class="event-header"></div>
        </div>
        <div class="event-tile vertical-tile tile-current">
            <div class="event-header"></div>
        </div>
    </div>
</div>

本文标签： htmlWhy has wrapping my nested elements to cause shrinking of the tilesStack Overflow