让p-tree节点占满父div的全部宽度

要让p-tree节点占满父div宽度，同时让内部进度条延伸至容器边缘，需要调整PrimeNG p-tree的默认CSS样式，具体步骤如下：

• 调整节点内容容器的布局：
  p-tree的.p-tree-node-content默认是inline-block布局，会收缩到内容宽度，需要改为块级布局并设置100%宽度：

  .p-tree .p-tree-node-content {
    display: block;
    width: 100%;
  }
  

• 重构节点标签区域的布局：
  节点内的.p-tree-node-label通常是标签文本的容器，需要改为flex布局，让标签和进度条能合理分配空间：

  .p-tree .p-tree-node-label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px; /* 可根据需求调整标签与进度条的间距 */
  }
  

• 设置进度条的自适应宽度：
  给进度条添加flex: 1属性，让它自动占满标签区域的剩余空间，替代无效的width: 100%：

  .your-progress-bar {
    flex: 1;
    height: 8px; /* 示例高度，按需调整 */
    border-radius: 4px;
  }
  

• 处理样式隔离问题（如Angular项目）：
  如果使用了组件样式隔离，需要用::ng-deep穿透样式，或者将上述CSS放在全局样式文件（如styles.css）中：

  ::ng-deep .p-tree .p-tree-node-content {
    display: block;
    width: 100%;
  }
  

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