How to make the child flex box 100% the height of the parent flex box?

Question

I'm a beginner and I'm trying to make an experimental site for my self, but I'm trying to make the .menu-conatainer 100% the height of .container but it doesn't work at all.

this is the jsfiddle: https://jsfiddle.net/y1h2ervw/2/

CSS:

.container{
    width: 100%;
    display: inline-flex;
    justify-content: center;
}

.menu-container{
    height: 100%;
    width: 80%;
    display: inline-flex;
    justify-content: center;
    margin: 0px;
    padding: 0px;
}

.Menu{
    width: 75%;
    display: inline-flex;
    justify-content: space-between;
    font-family: Montserrat;
    background-color: rgba(82, 121, 111, 0.5);
}

.site-title{
    padding-left: 15px;
    cursor: pointer;
}

.nav-items{
    padding: 0;
    margin-top: 5px;
    display: flex;
    font-size: 1.2rem;
}

.nav-items > *{
    padding: 0px;
    font-weight: 600;
    color: rgba(38, 70, 83, 1);
    margin: 15px;
}

.nav-items >*:hover{
    color: white;
    cursor: pointer;
}

@media (max-width: 685px){
    .container{
        display: inline-flex;
        height: fit-content;
        width: 30%;
        flex-direction: column;
        font-size: 0.8rem;
    }

    .Menu{
        border-radius: 2%;
        display: inline-flex;
        flex-direction: column;
    }

    .site-title{
        text-align: center;
        padding: 0;
    }

    .nav-items{
        text-align: center;
        margin: 5px 2px 5px 2px;
        display: inline-flex;
        flex-direction: column;
    }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portofolio</title>
    <link type="text/css" rel="stylesheet" href="style.css" >
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap" rel="stylesheet">
</head>
<body style="background-color: #ffe8d6;">
    <div class="container">
        <div class="menu-container">
            <div class="Menu">
                <div class="site-title"><h2>Portofolio</h2></div>
                <div class="nav-items">
                    <div>First Year</div>
                    <div>Second Year</div>
                    <div>Contact</div>
                    <div>More</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

I tried to add height: 100%; to the child flex box (menu-container) expecting it would be 100% the size of the parent flex box (container) but it didn't work.

The parent doesn't have any height set at the moment, so it will have the height of its content. Set the height of the parent, and then setting `height: 100%` should have an effect. — Geshode, Aug 22 '23 at 01:58

Ramon Soarez · Answer 1 · 2023-08-22T03:50:11.787

0

Set the property position: relative; on the parent element .container, which establishes a positioning context for absolute child elements. Then, apply position: absolute; to .menu-container, and use top: 0; bottom: 0; left: 0; right: 0; to define the size of .menu-container to occupy the entire height and width of .container.

edited Aug 22 '23 at 03:50

answered Aug 22 '23 at 02:04

Ramon Soarez

16
3

score 0 · Accepted Answer · answered Aug 22 '23 at 02:16

0

try this on .container : height: 100vh;

answered Aug 22 '23 at 02:16

soyaa

36
3

Thank you very much!! This did work but I don't fully understand why it does. Is it okay for you to explain it? – HazemWasfy Aug 22 '23 at 02:21
you must set hight of the parent div of the .menu-container (.container). the child will be follow the parent – soyaa Aug 22 '23 at 02:25
so why does it not work with setting the height using percentages instead of vh? – HazemWasfy Aug 22 '23 at 02:33
HTML and Body containers have somewhat different behavior when it comes to setting height by percentage – soyaa Aug 22 '23 at 02:39
When you set the height of a container using a percentage, it will refer to the height of the nearest parent container that has a set height (usually Body or HTML). – soyaa Aug 22 '23 at 02:39
In this case, if you want to set the height of a .container using a percentage, you need to make sure that the parent container (Body or HTML) also has a set height – soyaa Aug 22 '23 at 02:40
example : body, html { height: 100%; margin: 0; } .container{ height: 100% } – soyaa Aug 22 '23 at 02:41
Thank you very much for both providing a solution AND an explanation!! – HazemWasfy Aug 22 '23 at 02:44
my pleasure:::D – soyaa Aug 22 '23 at 02:51

How to make the child flex box 100% the height of the parent flex box?

2 Answers2