如何使含长文本的.right元素自适应且不超出父容器边界

完全可以用原生HTML/CSS实现你的需求，核心是调整Flex项目的弹性属性，同时补全文本截断的必要样式，解决容器溢出问题。

修改后的SCSS代码（兼容原写法） #

section {
  display: flex;
  border: 3px solid red;
  margin: 0 auto;
  width: 200px;

  & .left {
    background: dodgerblue;
    padding: 5px;
    color: #fff;
    flex-shrink: 0; /* 固定宽度，不被压缩 */
  }

  & .right {
    background: green;
    color: #fff;
    padding: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1; /* 自动填充父容器剩余宽度 */
    overflow: hidden; /* 隐藏超出内容，配合省略号生效 */
  }

  & .icon {
    padding: 5px;
    color: #fff;
    background: orange;
    flex-shrink: 0; /* 固定宽度，不被压缩 */
  }
}

关键修改点说明 #

• 固定侧边元素宽度：给.left和.icon加flex-shrink: 0，默认Flex项目会在空间不足时自动压缩，设置为0后它们会保持自身内容的宽度，不会被挤压变形。
• 让中间元素自适应剩余空间：给.right加flex: 1，这是弹性增长、收缩和基础宽度的简写，会让该元素自动占据父容器的剩余可用宽度。
• 实现文本截断：.right原有white-space: nowrap和text-overflow: ellipsis，但缺少overflow: hidden——这是文本截断生效的必要条件，加上后超长文本会被截断并显示省略号，不会撑爆容器。

移动端适配 #

如果要适配移动端横竖屏，只需把父容器的width: 200px改成width: 100%; max-width: 200px;（或其他相对单位），Flex布局会自动根据容器宽度调整各元素尺寸，.right始终填充剩余空间，完美适配屏幕变化。

HTML结构无需修改：

<section>
  <div class="left">
    Left
  </div>
  <div class="right">
    Right Lots-Of-Text-Data
  </div>
  <div class="icon">
    Icon
  </div>
</section>

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