Assuming my "main" app.component.html has only three lines of code in there:

```
<app-header-component></app-header-component>
<app-content-component></app-content-component>
<app-footer-component></app-footer-component>

```

where I want header component to occupy approximately 10% of the screen, for content to have 70% and for the footer - 20%, using the flexbox layout, and this size should not be changing how much of content is in respective components.
I tried adding flexbox myself but the ratio changes, especially for the `<app-content-component>`. I believe that the issue is that `<app-content-component>` has multiple nested components inside and that is why the ratio I need does not stay the same way.