html - 带有 Angular 组件的 Flexbox 布局

Question

我目前在我的 Angular 元素中有一个简单的页眉、主体、页脚结构，我想将主要组件变成一个 flex-box，以便以相等的宽度水平排列所有给定的组件。此外，当屏幕宽度低于 700px 时，我想更改 flex-direction 到列。 由于我已经使用纯 HTML + CSS 实现了这一点(请参阅 jsfiddle:http://jsfiddle.net/aJPw7/443/)，我感觉这与 Angular 父组件有关。

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

当前行为: <app-content-section>当我使用“justify-content”但不受任何高度或宽度属性影响时，元素对齐。

样式.css

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- 标签。