Flex布局行在屏幕缩小时意外换行的问题排查与解决

问题描述 #

卡片第一行包含4个动态元素（编号、类型、地址、优先级），地址元素设置了overflow: hidden和white-space: nowrap处理过长内容，但缩小屏幕宽度时，第一行意外分成两行，优先级元素（Prio: X）被挤到下一行，已使用flex-wrap: wrap但问题未解决。

HTML代码 #

<div class="row1">
  <div *ngIf="einsatz?.nummerFormatiert" class="item">
      <kendo-svg-icon
        [icon]="icons.favorit"
        [ngClass]="{'icon-favorit': einsatz?.favorit === 'ja'}"
        (click)="onEinsatzFavorit(einsatz?.id)"
      ></kendo-svg-icon>
    <span class="card-title-item">{{ einsatz?.nummerFormatiert }}</span>
  </div>

  <div *ngIf="einsatz?.status" class="file-item">
    <kendo-svg-icon
      class="file-icon"
      [icon]="icons.file"
    ></kendo-svg-icon
    ><span class="card-title-item">{{ einsatz?.anlassartKurzbezeichnung }}</span>
  </div>

  <div *ngIf="einsatz?.einsatzort" class="ort-item">
    <kendo-svg-icon
      class="map-icon"
      [icon]="icons.mapMarker"
    ></kendo-svg-icon
    ><span class="card-title-item ort-item">{{ einsatz?.einsatzort }}</span>
  </div>

  <div *ngIf="einsatz?.prioritaet" class="end-item">
    <span class="card-title-item">Prio: {{ einsatz?.prioritaet }}</span>
  </div>
</div>

CSS代码 #

.row1 {
  display: flex;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 1.5px;
  flex-wrap: wrap;
}

.file-item {
  margin-right: 14px;
  margin-bottom: 2px;
}

.end-item {
  margin-left: auto;
  margin-right: 16px;
}

.file-icon {
  transform: scale(0.67);
  margin-right: 6px;
  margin-bottom: 2px;
}

.map-icon {
  transform: scale(0.625);
  margin-right: 6px;
  margin-bottom: 2px;
}

:host ::ng-deep .k-svg-i-favorit { /* this is the star icon at the beginning */
  transform: scale(0.8);
  margin-right: 5.5px;
  margin-left: -1px;
  margin-bottom: 3.5px;
}

.ort-item {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 65%;
}

问题原因 #

1. 优先级元素的margin-left: auto特性：margin-left: auto会强制.end-item靠右，当容器宽度缩小时，它会优先占据右侧空间，同时向左挤压地址元素。当容器总宽度不足以同时容纳左侧所有元素（地址+编号+类型）和优先级元素时，flex-wrap: wrap会触发换行，而auto margin的分离特性会让优先级元素被单独挤到下一行。
2. 地址元素的max-width: 65%设置不合理：该百分比基于父容器宽度计算，窄屏场景下65%的宽度仍会占据过多空间，导致剩余空间无法容纳优先级元素，进而触发换行。

修复方案 #

调整后的CSS样式 #

.row1 {
  display: flex;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 1.5px;
  flex-wrap: wrap;
  align-items: center; /* 让元素垂直居中，优化视觉效果 */
}

.ort-item {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1; /* 替换max-width，让地址元素填充剩余可用空间 */
  min-width: 0; /* 关键：允许子项宽度小于内容宽度，确保overflow生效 */
  margin-right: 14px; /* 和其他元素保持一致间距 */
}

.end-item {
  margin-left: auto;
  margin-right: 16px;
  flex-shrink: 0; /* 禁止优先级元素收缩，保证内容完整显示 */
}

修复说明 #

• 用flex:1替换地址元素的max-width:65%，让它自动填充容器剩余空间，确保优先级元素尽量留在同一行（仅极端窄屏时才会换行）。
• 添加min-width:0是flex布局的关键细节：默认flex子项最小宽度为内容宽度，该属性允许子项宽度被压缩至小于内容宽度，才能让overflow: hidden和text-overflow: ellipsis正常生效。
• 给优先级元素加flex-shrink:0，避免空间不足时被压缩变形，保证“Prio: X”完整显示。
• 新增align-items: center让所有元素垂直居中，提升视觉一致性。

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