父容器设display:flex后子元素宽度一致的问题解决

开发类似Twitter/WhatsApp的聊天应用，需要己方消息右对齐、对方消息左对齐。原代码使用float布局可正常工作，但给父容器添加display:flex和flexDirection:"column"后，所有消息子元素宽度变得一致，无法实现预期对齐效果（使用NextJS作为框架）。

原代码 #

JSX代码 #

<div
  style={{
    overflow: "auto",
    display:"flex",
    flexDirection:"column",
  }}
>
      {chatMessageInfo[currentChatID].map((e, idx) => (
        <>
          {e.data.sender === ourRef ? (
            <div className="ourMessage">
              <p>{e.data.msg.text}</p>
            </div>
          ) : (
            <div className="theirMessage">
              <p>{e.data.msg.text}</p>
            </div>
          )}
        </>
      ))}
</div>

CSS代码 #

.ourMessage {
  display: flex;
  border-radius: 0px;
  margin-top: 0px;
  margin-bottom : 0px;
  max-width: 300px;
  background: rgb(29 155 240);
  border-radius: 25px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 500px;
  text-align: right;
  float: right;
  zoom: 1;
}

.theirMessage {
  display: flex;
  border-radius: 0px;
  margin-top: 0px;
  margin-bottom : 0px;
  max-width: 300px;
  background: rgb(150, 150, 150);
  border-radius: 25px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  float: left;
  zoom: 1;
}

解决方案 #

核心原因 #

Flex容器中float属性会失效，同时默认情况下flex子元素会被拉伸以适应容器宽度，导致所有消息框宽度一致。需要利用Flex布局的属性实现对齐，而非依赖float。

修改步骤 #

1. 调整父容器样式
   添加align-items: flex-start确保子元素不会被拉伸，宽度由内容决定；可额外添加gap优化消息间距：

<div
  style={{
    overflow: "auto",
    display:"flex",
    flexDirection:"column",
    alignItems: "flex-start", // 禁止子元素拉伸，保持内容宽度
    gap: 8, // 可选：消息之间的垂直间距
  }}
>
  {/* 消息列表 */}
</div>

2. 修改己方消息（ourMessage）CSS
   移除固定margin-left和float，用margin-left: auto将消息推到容器右侧：

.ourMessage {
  display: flex;
  margin-top: 0px;
  margin-bottom : 0px;
  max-width: 300px;
  background: rgb(29 155 240);
  border-radius: 25px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: right;
  margin-left: auto; /* 关键：自动将消息对齐到右侧 */
}

3. 修改对方消息（theirMessage）CSS
   移除float，依赖父容器的align-items: flex-start保持左对齐，可选添加margin-right: auto强化对齐效果：

.theirMessage {
  display: flex;
  margin-top: 0px;
  margin-bottom : 0px;
  max-width: 300px;
  background: rgb(150, 150, 150);
  border-radius: 25px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  margin-right: auto; /* 可选：确保消息严格左对齐 */
}

效果说明 #

• 父容器的align-items: flex-start让消息框宽度由内容决定，不会拉伸至容器宽度
• margin-left: auto利用Flex自动边距特性，将己方消息推到容器右侧
• 对方消息默认左对齐，适配任意容器宽度

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