Html 带角度组件的Flexbox布局

我目前在我的angular项目中有一个简单的页眉、主页眉和页脚结构，我想将主组件做成一个弹性框，以便以相等的宽度水平排列所有给定的组件。另外，当屏幕宽度低于700px时，我想将柔性方向更改为柱形。 由于我已经用纯HTML+CSS实现了这一点（参见JSFIDLE:），我感觉这与angular父组件有关

---

预期行为：两个

将100%高度设置为
html
。是更新的小提琴。
因此正确的答案是在“应用程序内容部分CSS”中添加一个
:host{flex:1；}
，以便为其托管组件
提供正确的flex大小

我在第二次编辑时发现了这一点，但@karthikaruna指出我忘记在样式文件中添加HTML标记。
谢谢你指出这一点。我自己几乎找到了解决方案，但忘记在样式中添加HTML标记。现在工作得很好。
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

<app-main-component>
    <app-content-section></app-content-section>
    <app-content-section></app-content-section>
</app-main-component>

<div class="main-component"> 
    <ng-content></ng-content>
</div>

.main-component {
    display: flex;
    flex-direction: row;
    height: 100%;
}

@media screen and (max-width: 700px) {
    .main-component {
        flex-direction: column;
    }
}

<div class="content-section">
    <a>Test</a>
</div>

.content-section {
    width: 100%;
    height: 100%;
}