title: Angular / CSS all parents heigh 100% still child ignores 100% height
body: <p>I have made a page where I have set all parent elements their height to 100% including the app root. Still once I get to a component in the body it seems to ignore my height. If I use my dev tools it shows that the direct parent of &quot;.main-container-employee&quot; has 100% height. I have set the styles of the &quot;.main-container-employee&quot; inline to avoid any issue to shadow-dom but still no avail. Any help will be appreciated!</p>
  <p><a href="https://i.stack.imgur.com/zatH1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zatH1.png" alt="enter image description here" /></a></p>
  <p>In styles.scss I have set the following code</p>
  <pre><code>:root,
  html,
  body {
    height: 100%;
    min-height: 100%;
  }
  
  .main-container-employee {
    min-height: 100%;
    height: 100%;
    display: block;
  }
  </code></pre>
  <p>In App.component I have madethe following html</p>
  <pre><code>&lt;div class=&quot;main-container-employee&quot; style=&quot;height: 100%; min-height: 100%; display: block;&quot;&gt;
  
    &lt;div class=&quot;header-box&quot;&gt;
        &lt;abf-logo-bar&gt;&lt;/abf-logo-bar&gt;
        &lt;abf-navbar [routeList]=&quot;navbarRoutes&quot;&gt;&lt;/abf-navbar&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;content-container&quot;&gt;
      test
    &lt;/div&gt;
    
  &lt;/div&gt;
  </code></pre>