Enabling relative and flex to be shared across angular components

Question

So I have one component like so;

HTML

<div class="flex-container"> 
<external-component></external-component>
</div>

CSS

.flex-container{
height: 100vh;
width: 100vw;
display: flex;
position: relative;
}

CSS for external component

.external{
flex: 1 1 50%;
height: 20vh;
background-color:black;
}

This doesn't work however it will display nothing, I'm assuming that for some reason the external component doesn't appear to inherit from the parent element.

Any work arounds for this would be fantastic.

Answer 1

Either add a css class external in app.component.html to the <external-component/> and move styles for external to app.component.css, or rename the class .external to :host. Or move all these styles into styles.css (which is not scoped to any specific component).

So, solution 1:

<div class="flex-container"> 
  <external-component class="external"></external-component>
</div>

That, and styles are all in app.component.css.

Solution 2, external.component.css:

.external{
  flex: 1 1 50%;
  height: 20vh;
  background-color:black;
}