As I work on designing a straightforward website, I find myself grappling with CSS and particularly inheritance. My objective is to create a side menu where items are stacked vertically:
#inner-flex-container {
display: flex;
flex-direction: column;
width: 100%;
}
#container {
display: flex;
}
.left-menu-navbar {
display: inherit;
flex-direction: column;
}
.left-menu {
display: inherit;
background: hotpink;
flex-direction: column;
}
.header {
flex: 1;
background: tomato;
}
.outlet {
flex: 2;
background: deepskyblue;
}
.footer {
flex: 1;
background: lightgreen;
}<div id="container">
<div class="left-menu">
<span class="left-menu-navbar">
<a routerLink="projects" routerLinkActive="active">Projects</a>
<a routerLink="upload" routerLinkActive="active">Upload</a>
<a routerLink="account" routerLinkActive="active">Account</a>
<a routerLink="create" routerLinkActive="active">Create project</a>
</span>
<span>111</span>
<span>222</span>
<span>333</span>
</div>
<div id="inner-flex-container">
<span class="header">MENU COMPONENT</span>
<div class="outlet">
<router-outlet></router-outlet>
</div>
<span class="footer">vVVVVVVv</span>
</div>
</div>Although this code technically functions as intended, I am curious why I need to explicitly define the css properties for
<span class=left-menu-navbar">left-menu), but that does not seem to be the case...