组件未正确调整宽度属性

Question

我正在努力尝试在 Angular 中设置组件的宽度。我正在使用flex，也许grid会帮助我，但我想使用flexbox来学习。为了简化起见，我有一个带有 div 的页面，其中包含我的组件的 6 个实例。

<main>
  <div class="card">
    <app-component [label]="1"></app-component>
    <app-component [label]="1"></app-component>
    <app-component [label]="1"></app-component>
    <app-component [label]="1"></app-component>
    <app-component [label]="1"></app-component>
    <app-component [label]="1"></app-component>
  </div>
</main>

款式

.card {
    width: 600px;
    display: flex;
    flex-wrap: wrap;
}

组件：

<div class="row__input a">{{ label }}</div>

组件样式：

.row__input {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 240px;
    width: 100%;
}
.a {
    height: 48px;
    background-color: red;
    max-width: 240px;
    width: 100%;
}

问题是我想以 240px 作为最大宽度显示组件，因此在全屏的情况下，字段以 240px 宽度显示，但一旦我使屏幕更小，组件宽度也应该更小。

我发现的解决方案之一是使用

:host{ display:contents}

但我不确定这是否是一个好的做法。也许这与 Angular 用于将组件放置在 DOM 中的标签有关，因为直接使用 div 而不是组件，宽度可以正确显示。

我确信缺少了一些东西，但我不知道它是什么。 另外，你认为混合网格和弹性盒是一个很好的实践吗？

示例项目：https://stackblitz.com/edit/stackblitz-starters-4s35dh?file=src%2Fcomponent%2Fcomponent.scss

Answer 1

 我认为下面的 css 可以完成这项工作
    
    。卡片 {
        最大宽度：600px； // 删除宽度或更改为 max-width: 600px;
        显示：柔性；
        弹性包裹：包裹；
        间隙：20px；
    }
    
    将您的组件样式替换为
    
    ：主持人 {
        背景：红色；
        弹性基础：240px； // 设置基础宽度
        弹性增长：0； // 设置最大宽度 240
        弯曲收缩：1； // 允许收缩
        显示：柔性；
        弹性方向：列；
        间隙：4px；
    }