HTML & CSS: Elements don’t fill the parent, despite adequate measurements

by 
.mg-0{
    margin: 0;
}


.bs-bb{
    box-sizing: border-box;
}


.fx{
    display: flex;
}
.fx-ai-c{
    align-items: center;
}
.fx-jc-c{
    justify-content: center;
}
.fx-dir-c{
    flex-direction: column;
}


.loading_content{ /* remember about responsiveness */
    width: 74vw;
    height: 74vh;
}
.loading_parent{
    background-color: black;
    width: 100vw;
    height: 100vh;
}

.loading_tabs{ /* remember about responsiveness */
    height: 60%;
}
.loading_tab{
    height: 100%;
}
.loading_tab_lesser{
    width: 256px;
    border: 3px #ECF380 solid;
}

.loading_tab_clip_path{

}
.loading_tab_mg{
    margin: 0 calc(74vw * 0.03);
}

.loading_tab_headers{
    background-color: #ECF380;
}
.loading_tab_title_nm{
    height: 17.5%;
}
.loading_tab_data_sm{
    height: 73.75%;
}
.loading_tab_footer{
    height: 8.75%;
}
<body class="mg-0">
        <section class="loading_parent fx fx-ai-c fx-jc-c">
            <div class="loading_content fx fx-ai-c fx-jc-c fx-dir-c">
                <div class="loading_tabs fx fx-ai-c fx-jc-c">
                    <div class="loading_tab loading_tab_lesser fx fx-dir-c bs-bb">
                        <div class="loading_tab_title_nm loading_tab_headers bs-bb">

                        </div>
                        <div class="loading_tab_data_sm">
                            
                        </div>
                        <div class="loading_tab_footer loading_tab_headers">

                        </div>
                    </div>
                    <div class="loading_tab loading_tab_mg bs-bb">
                        
                    </div>
                    <div class="loading_tab loading_tab_lesser fx fx-dir-c bs-bb">
                        
                    </div>
                </div>
            </div>
        </section>
    </body>

I’m facing a problem with a series of divs interpreting percentages unexpectedly.

Despite the collective height of theirs being 100% of their parent, it fails to fill it fully.

I:

  • deleted borders;
  • applied box-sizing;
  • checked measurements multiple times.

The formula for the height is 17.5 + 8.75 + 73.75 = 100 [%]

Example attached here

  • Which is the part that did not fill their parent fully? The three divs each with classes loading_tab_title_nm, loading_tab_data_sm, and loading_tab_footer seems filling their parent perfectly to me

    – 




  • @SyndRain the problem is reproducible on certain heights – if you try to resize the browser window, sometimes thin space spawns, a few pixels in height, after loading_tab_footer.

    – 




  • @SyndRainall parts seem to load as intended

    – 

  • Still can’t reproduce, even the sub pixels adds up correctly. Would you be able to provide an example height of the parent container when the heights don’t add up correctly?

    – 

Leave a Comment