As a beginner, I'm venturing into creating an experimental site for myself. However, I am facing an issue where the .menu-container does not seem to stretch 100% the height of the .container.
You can view the code on 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 attempted to set height: 100% for the child flex box (menu-container) hoping it would inherit the size of the parent flex box (container), but unfortunately, it did not work as expected.