窗口缩小时Flex布局内容溢出容器的解决方法

问题描述 #

使用display: flex定位容器内容时，窗口缩小会导致内容溢出容器；中间文本长度变化时，图标和按钮无法保持居中，不符合预期。

调整方案 #

核心是修正Flex子项的默认行为，让中间文本区域自适应空间并换行，同时保留图标和按钮的居中对齐：

• 给中间文本容器添加最小宽度限制和换行控制：Flex子项默认min-width: auto会阻止内容换行，设置min-width: 0让它能收缩到容器允许的范围，再通过overflow-wrap: break-word确保长文本自动换行。
• 移除按钮上无效的float: right：Flex布局中float属性不生效，按钮作为Flex子项会自动跟随布局流，保持与其他元素的居中对齐。
• 可选优化：若需要文本过长时显示省略号，可替换换行样式为white-space: nowrap; overflow: hidden; text-overflow: ellipsis;。

修改后的代码 #

TSX代码（无变化） #

import * as React from "react";
import { render } from "react-dom";
import "./styles.css";

const App = () => {
  return (
    <div className="info-box-container">
      <div className="info-box-section">
        <span className={"info-box-icon"}>icon</span>
        <div className={"info-box-text"}>
          <span>Dummy Text Dummy Text Dummy Text Dummy Text</span>
        </div>
        <button className={"info-box-action-button"}>Test Configuration</button>
      </div>
    </div>
  );
};

render(<App />, document.getElementById("root"));

CSS代码（修改部分） #

.info-box-container {
  border: 1px solid black;
  padding: 8px 20px;
}

.info-box-container .info-box-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.info-box-container .info-box-section .info-box-text {
  flex: 1;
  margin-left: 12px;
  min-width: 0; /* 关键：允许文本容器收缩 */
  overflow-wrap: break-word; /* 长文本自动换行 */
  /* 若要显示省略号，替换上面两行：
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  */
}

.info-box-container .info-box-section .info-box-action-button {
  margin-left: 12px; /* 可选：给按钮添加左边距，和文本保持间距 */
}

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