Why css wont inherit on their own

Question

I'm trying to style a simple website. I'm having trouble with css and particularly with inheritance. My goal is to have side menu and inside it items placed one under another:

#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>

This code does the job, but what I'm asking is why I have to explicitly declare in tag <span class=left-menu-navbar"> css properties as display and explicitly declare direction? I would expect to inherit it from parent (left-menu) but that's not happening...

possible duplicate: https://stackoverflow.com/q/37840646/3597276 — Michael Benjamin, Sep 30 '17 at 12:44
@Michael_B This is more about inheritance than Flexbox, so I posted that as an answer. — Asons, Oct 01 '17 at 10:46

score 2 · Accepted Answer · answered Oct 01 '17 at 10:44

why I have to explicitly declare in tag css properties as display and explicitly declare direction?

The simple answer is:

Not all CSS properties are inherited, because it doesn’t make sense for some of them to be. For instance, margins are not inherited, since it’s unlikely that a child element should need the same margins as its parent. In most cases common sense will tell you which properties are inherited and which aren’t, but to be really sure you need to look up each property in the CSS 2.1 specification property summary table.

Src: https://www.w3.org/wiki/Inheritance_and_cascade

Why css wont inherit on their own

1 Answers1