Включение относительного и гибкого распределения между угловыми компонентами

Question

Итак, у меня есть один такой компонент;

HTML

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

CSS

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

CSS для внешнего компонента

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

Это не работает, однако ничего не будет отображаться, я предполагаю, что по какой-то причине внешний компонент не наследуется от родительского элемента.

Любое решение этой проблемы было бы фантастическим.

Answer 1

Либо добавьте класс css external в app.component.html к <external-component/> и переместите стили для external в app.component.css, либо переименуйте класс .external в :host. Или переместите все эти стили в styles.css (который не ограничен каким-либо конкретным компонентом).

Итак, решение 1:

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

То, и все стили находятся в app.component.css .

Решение 2, external.component.css :

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