Flex行自适应单元格内容高度问题：内容溢出容器DIV

我来帮你搞定这个布局问题！先看看你当前代码里的几个核心问题：

• 固定行高锁死了内容空间：你给.assignment__row设置了height:21px，这直接导致长文本没法换行，只能溢出到容器外，这是最主要的病根。
• 缺少文本换行控制：就算去掉固定高度，没给文本容器加换行样式的话，长文本还是可能不折行，继续溢出。

下面是修改后的CSS代码（保留你的BEM Less结构）：

.assignment {
 display: flex;
 background-color: #C0C0C0;
 padding: 10px;
 width: 300px; // 保留demo用的固定宽度
 &__details {
  flex: 1 1 80%;
  // 防止.details容器被按钮区域挤压得无法正常收缩
  min-width: 0;
 }
 &__controls {
  display: flex;
  flex: 1 1 20%;
  justify-content: flex-end;
  align-items: center;
  // 给按钮区域设置最小宽度，避免被过度挤压
  min-width: 40px;
 }
 &__row {
  display: flex;
  // 移除固定height，让行高完全自适应内容
  margin-bottom: 8px; // 可选：给行之间加间距，视觉更舒服
  &__title {
   flex: 1 0 50%;
   // 标题右对齐，和内容区做区分，可选优化
   text-align: right;
   padding-right: 8px;
  }
  &__value {
   flex: 1 1 50%;
   // 关键：让长文本在容器宽度内自动换行
   word-wrap: break-word;
   // 也可以用 white-space: pre-wrap; 保留空格的同时换行
   // white-space: pre-wrap;
  }
 }
}

关键修改点说明： #

1. 移除固定行高：这是让行高自适应的核心，去掉height:21px后，容器会根据内容高度自动调整。
2. 添加文本换行样式：给.assignment__row__value加上word-wrap: break-word，确保长文本在单元格内自动折行，不会溢出到外部。
3. 优化Flex容器挤压问题：给.assignment__details加min-width:0，避免它被按钮区域挤压得无法正常收缩；给.assignment__controls设置最小宽度，保证按钮始终有足够空间显示。
4. 可选视觉优化：给标题加右对齐和内边距，让布局层次更清晰；行之间加间距，提升可读性。

修改后，长文本会在各自单元格内自动换行，行高跟着内容自适应，按钮区域也能保持正常显示，不会被挤压变形。

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