Flex布局右侧列忽略左侧列空间及文本溢出问题排查

核心问题分析 #

1. .col2用width:100%在Flex布局里不够合理，加上无空格的连续长文本会直接撑开容器宽度，导致整个Flex容器超出视口，.col1被挤得看不见。
2. 文本换行规则写错了：word-break: keep-all会阻止无空格的长文本换行，这是关键诱因。

修复步骤 #

1. 调整Flex列的布局规则 #

修改.app-window和.col2的Flex属性，确保.col1固定宽度不收缩，.col2自动占满剩余空间：

.app-window {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  /* 防止容器被内容撑出视口 */
  overflow: hidden;
}

.col1 {
  width: 340px;
  /* 强制.col1不被压缩 */
  flex-shrink: 0;
}

.col2 {
  /* 用flex:1替代width:100%，自动填充剩余空间 */
  flex: 1;
  position: relative;
  /* 防止.col2内部内容撑爆容器 */
  overflow: hidden;
}

2. 修正文本换行逻辑 #

改.message:is(.my, .other) p的换行属性，让无空格的长文本也能自动换行：

.message:is(.my, .other) p {
  width: 100%;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
  /* 替换keep-all为break-all，允许无空格文本强制换行 */
  word-break: break-all;
  overflow: hidden;
}

3. 确保消息容器不超宽 #

给.message.content加box-sizing: border-box，避免内边距导致宽度溢出：

.message.content {
  padding: 5px 40px 0 10px;
  width: 100%;
  box-sizing: border-box;
}

最终效果 #

• .col1始终保持340px宽度，不会被挤压消失
• .col2自动占据剩余空间，不会超出视口范围
• 不管是带空格的长文本还是无空格连续字符，都会自动换行，不会撑破容器

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