你遇到的问题非常典型：在 Flex 布局中，当一个子元素（B）内容较多或未限制宽度时，即使另一个子元素（A）设置了固定宽度，A 仍可能被压缩（shrink），这是因为 Flex 默认开启了 flex-shrink: 1。

---

🔍 问题原因

在 display: flex 的父容器中，每个子项默认具有：

flex-shrink: 1; /* 允许收缩 */
flex-grow: 0;
flex-basis: auto;

当容器空间不足时，所有子项会按比例 收缩，即使你给 A 设置了 width: 100rpx，它依然可能被 B 的内容“挤小”。

---

✅ 正确解决方案

✅ 方法一：禁止子容器 A 收缩（推荐）

给 固定宽度的子容器 A 显式设置 flex-shrink: 0：

<template>
  <view class="parent">
    <view class="box-a">固定</view>
    <view class="box-b">内容撑起宽度的内容内容内容...</view>
  </view>
</template>

<style>
.parent {
  display: flex;
  flex-direction: row;
  /* width: 100%; 默认即可 */
}

.box-a {
  width: 120rpx;       /* 固定宽度 */
  flex-shrink: 0;      /* 👈 关键！禁止收缩 */
  background: #ffcccc;
}

.box-b {
  /* 不设宽度，由内容撑开 */
  background: #ccffcc;
  /* 可选：防止无限撑宽 */
  max-width: 600rpx;
  word-break: break-word;
}
</style>

✅ 这样 box-a 就会 严格保持 120rpx 宽度，不会被挤压。

---

✅ 方法二：使用 flex 简写（更清晰）

你可以用 flex 属性一次性设置 grow/shrink/basis：

.box-a {
  flex: 0 0 120rpx; /* grow:0, shrink:0, basis:120rpx */
}

这和上面效果完全一致，且更简洁。

---

✅ 方法三：如果 B 需要“尽可能占用剩余空间”但又不挤压 A

如果你希望 B 填满剩余空间（而不是仅由内容撑开），那应该这样：

.box-a {
  flex: 0 0 120rpx;
}
.box-b {
  flex: 1; /* 占据剩余所有空间 */
  /* 内容自动换行 */
  word-break: break-word;
}

⚠️ 但你说的是 B 由内容撑起宽度，所以通常 不要用 flex:1，否则 B 会拉伸占满。

---

🎯 总结你的场景

表格

子容器	要求	推荐样式
A	固定宽度，不被挤压	width: xxx; flex-shrink: 0; 或 flex: 0 0 xxx;
B	宽度由内容决定	不要设 flex:1，可加 max-width 防溢出

---

💡 额外建议（聊天界面常见）

如果你是在做 头像 + 消息气泡 布局（比如左边头像固定宽，右边消息自适应），完整写法如下：

<view class="message-row">
  <view class="avatar">👤</view>
  <view class="bubble">今天心情不太好...</view>
</view>

.message-row {
  display: flex;
  align-items: flex-start; /* 顶部对齐 */
  padding: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  flex-shrink: 0; /* 👈 防止被挤压 */
  margin-right: 20rpx;
  background: #eee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bubble {
  display: inline-block;
  background: #f0f0f0;
  padding: 16rpx 24rpx;
  border-radius: 16rpx;
  max-width: 500rpx; /* 防止超宽 */
  word-break: break-word;
}

这样头像就不会被长消息挤变形。