带有 Angular 组件的 Flexbox 布局

Question

我目前在我的 angular 项目中有一个简单的页眉、主要、页脚结构，并希望将主要组件设为一个弹性盒，以便以相等的宽度水平排列所有给定的组件。另外，当屏幕宽度低于 700px 到列时，我想更改 flex-direction。由于我已经使用纯 HTML + CSS 实现了这一点（参见 jsfiddle：http : //jsfiddle.net/aJPw7/443/），我觉得这与 angular 父组件有关。

预期行为：这两个<app-content-section>元素各占 50% 的宽度<app-main-component>和 100% 的高度。当我将 flex-direction 更改为 column 时，它们应该具有 100% 的宽度和 50% 的高度：

Currrent行为：该<app-content-section>元素，当我使用对齐“证明内容”，但不被任何HIGHT或width属性的影响。

样式文件

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

应用程序根 HTML：

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

应用程序主组件 HTML：

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

应用主组件 CSS：

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

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

应用内容部分 HTML：

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

应用内容部分 CSS：

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

Edit1：我也尝试过，:host{ }但仍然没有运气。

Edit2：我创建了另一个 jsfiddle，通过设置宿主元素的样式并添加flex: 1，我获得了正确的宽度，但元素仍然不会使用整个高度。https://jsfiddle.net/1c15q243/19/

Answer 1

因此，正确的答案是:host{ flex: 1; }在“app-content-section CSS”中添加一个，以便为其托管组件提供<app-content-section>正确的 flex-sizing。

我在第二次编辑的过程中发现了这一点，但@karthikaruna 指出我忘记在 stylig 文件中添加 HTML- 标签。