**This is my first question on this website, and I'm pretty much a newbie when it comes to web development, so sorry in advance if this is an incredible dumb question, but I cannot, for the life of me, figure this out:
First of all, here's my html code, simple enough:**
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="src/css/styles.css">
</head>
<body class="flexbox">
<section id="navbar" class="flexbox">
<ul>
<li>Aktuell</li>
<li>Schauspiel</li>
<li>Projekte</li>
<li>Gallerie</li>
<li>Personalien</li>
<li>Blog</li>
<li>Links</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</section>
<section id="content" class="flexbox">
<article id="reel">
<img src="src/img/istockphoto.jpg" alt="Laechelnde Frau">
</article>
<article id="quote">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora doloribus commodi aspernatur blanditiis. Nobis optio libero modi reiciendis iusto
repellendus harum odit! Natus sed voluptatibus explicabo quo voluptatum eius ab?
</article>
</section>
</body>
</html>
and here is the respective css:
/* GENERAL*/
*{box-sizing: border-box;}
.flexbox{display: flex;}
html{font-size: .8vw;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
background-color: beige;}
body{width: 100%;
margin: 0;
flex-direction: row;
align-items: stretch;}
@media(max-width:425px){#body{flex-direction: column;
align-items: center;}}
/* NAVIGATION */
#navbar{background-color: palegreen;
width: 10%;
height: 100%;
flex-direction: column;
align-items: stretch;}
@media(max-width:1024px){#navbar{width:12%;}}
@media(max-width:768px){#navbar{width:14%;}}
@media(max-width:425px){#navbar{display: none;}}
#navbar>ul{list-style-type:none;
background-color: palegreen;
padding: 0 0 0 0;
height: 100%;}
#navbar>ul>li{display:block;
font-size: 1.5rem;
width: auto;
padding: 15% 15% 15% 15%;}
@media(max-width:1024px){#navbar>ul>li{font-size: 1.8rem;}}
@media(max-width:768px){#navbar>ul>li{font-size: 2rem;}}
/* CONTENT */
#content{width: 90%;
height: 100%;
flex-direction: column;}
@media(max-width:1024px){#content{width:88%;}}
@media(max-width:768px){#content{width:86%;}}
@media(max-width:425px){#content{width:100%;}}
#reel{width:60%;
margin: 7% auto 0 auto;}
@media(max-width:768px){#reel{width:70%;}}
#reel>img{width:100%;
border-radius: 10px;}
#quote{width:60%;
background-color: palegreen;
border-radius: 10px;
font-size: 1.2rem;
font-style: italic;
text-align: center;
line-height: 150%;
margin: 5% auto 2% auto;
padding: 1%}
@media(max-width:1024px){#quote{font-size: 1.5rem;}}
@media(max-width:768px){#quote{font-size: 2rem;
width:70%;}}
@media(max-width:425px){#quote{font-size: 3.3rem;}}
@media(max-width:375px){#quote{font-size: 3.5rem;}}
@media(max-width:320px){#quote{font-size: 4rem;}}
**What I want to happen is for the section#navbar to always be the exact same height as the section#content, both 100% of the display. So, what I tried is giving both of them 100% height of their parent-element, the body-element.
The problem is that the green background of section#navbar and/or section#navbar>ul just will not stretch to the bottom at the same level as its sibling-element section#content despite both inheriting the same height from their parent-element.
section#content being taller, it should be the one to define the overall height of both sibling-elements as well as the parent-element body, considering the latter has no specific height itself and should therefore be just as high as it needs to be to display all of its child-elements.
(I started out with the body-element also having height:100%; which kind of fixed this specific problem to a degree, but caused even weirder ones I didn't understand, especially when any elements were not entirely within the viewport, so I scrapped it. I also tried using vh as a unit for the different elements' height-property, but that led to pretty much the same chaos. I also tried giving section#navbar and section#navbar>ul the .flexbox-class and a few different properties, none of which worked.)
I assume I'm screwing up something with the position-property as I still cannot wrap my head around how it works and therefore haven't defined it for any elements. But I have tried that as well, giving several of the elements involved different position-properties, none of which helped. I also don't really understand floats, so those haven't been used either.**
You should be able to just leave out that
heightproperty on thenavbarid. The flexbox handles that height automatically because of stretching.