Angular多组件场景下Div宽度无法占满可用空间问题

问题出在Angular组件的宿主元素额外层级上：原生HTML没有这一层级，而<app-photo-card>作为自定义元素，默认带有inline-block的display属性（会产生字符间距），且未正确继承flex布局的空间分配规则，导致空白出现。结合Tailwind的flex布局，可通过以下步骤修复：

1. 调整主容器与子组件的flex规则 #

移除主容器的justify-between（该属性会在子元素总宽度不足时产生空白），改用flex-1让子组件均分容器空间：

修改主HTML文件：

<div class="container !mx-0 w-full flex flex-row">
  <app-photo-card
    *ngFor="let photo_card of photo_cards"
    [photo_card]="photo_card"
    class="flex-1"
  ></app-photo-card>
</div>

2. 确保组件宿主元素占满分配空间 #

Angular组件的宿主节点（<app-photo-card>）需要明确设置样式，避免默认的inline布局间距。可通过组件TS的host绑定统一设置：

修改Photo Card组件TS文件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-photo-card',
  templateUrl: './photo-card.component.html',
  host: {
    'class': 'flex-1' // 强制宿主元素参与flex空间分配
  }
})
export class PhotoCardComponent {
  @Input() photo_card: any;
}

3. 简化组件内部HTML（可选） #

组件内部的外层div可以省略，直接让蓝色背景的div占满宿主元素：

<div class="w-full bg-blue-500">a</div>

为什么原生HTML正常？ #

原生HTML没有Angular组件的宿主节点层级，直接是div作为flex子元素，自然会继承flex布局规则；而Angular多了一层自定义元素，必须手动给这层元素设置正确的flex样式才能消除空白。

内容的提问来源于stack exchange，提问作者jspoh