css - 子组件样式溢出父组件

Question

我最近开始学习使用 Angular 进行前端开发，并且正在尝试创建一个视图（“见证报告”），其中将包含一个过滤卡网格，用户可以单击该网格以根据主题过滤掉故事。我创建了一个作为页面/视图的见证报告组件，以及一个用于卡片的报告过滤器组件。我目前正在测试视图，就像这样

见证报告.component.html

<div>
<h1>User Reports</h1>
<div class="filterGrid">
    <app-report-filters></app-report-filters>
    <app-report-filters></app-report-filters>
    <app-report-filters></app-report-filters>    
    <app-report-filters></app-report-filters>
    <app-report-filters></app-report-filters>
    <app-report-filters></app-report-filters>            
</div>

见证报告.component.html

.filterGrid {
background-color: blue;
display: grid;
column-gap: 50px;
grid-template-columns: repeat(auto-fill, 400px);
}    

和过滤器模板

报告-filters.component.html

<a class="filterItem">Report Filter</a>

报告过滤器.component.css

.filterItem {
background-color: purple;
text-align: center; 
margin: 20px;
padding:  100px;
}

当我通过将 filterItem 类保留在父样式表中并将其用作 children 的属性来对其进行测试时<app-report-filters class="filterItem">，子项得到了正确排列，并且父项扩展以适应。一旦我将样式移动到子组件以使其保持模块化（我计划重用类似的过滤器），使用子组件的边距会导致它们溢出并呈现在父组件上（蓝色块是父<div>元素）：

我四处搜索并偶然发现了折叠边距的概念，但这里似乎并非如此。我也知道使用溢出属性，但这不是我的预期目标。有没有办法让父级展开？过滤器将从类别列表中动态添加。

标签： cssangular