如何在不使用固定宽高值的情况下让所有Flex子项保持等高宽？

我有3个Flex子项，但第二个子项的宽度比其他子项大，因为它的描述内容非常长。

请问能否在描述内容变化时，让所有Flex子项保持相等的高度和宽度，且不使用固定的宽高值？

以下是我的App.js代码：

import "./styles.css";

export default function App() {
  const containerStyles = {
    display: "flex",
    flexDirection: "column",
    backgroundColor: "green",
    marginRight: "10px",
    flex: 1
  };

  return (
    <div style={{ display: "flex" }}>
      <div style={containerStyles}>
        <div>Title 1</div>
        <div>Description 1</div>
        <div>Click to view detail</div>
      </div>
      <div style={containerStyles}>
        <div>Title 2</div>
        <div>Description 2 veryyyy longgggggggggggggggggggggg</div>
        <div>Click to view detail</div>
      </div>
      <div style={containerStyles}>
        <div>Title 3</div>
        <div>Description 3</div>
        <div>Click to view detail</div>
      </div>
    </div>
  );
}

可以通过以下调整实现所有Flex子项宽高一致，且不依赖固定值：

• 调整子项的flex属性：将子项的flex: 1改为flex: 1 1 0%，让子项基于0的基准宽度平分父容器的可用空间，彻底摆脱内容宽度的影响。
• 解除子项最小宽度限制：给子项添加minWidth: 0，避免长文本突破flex子项的默认最小宽度限制。
• 处理长文本换行：给描述文本容器添加overflowWrap: "break-word"，让超长文本自动换行，不会撑大容器。

修改后的代码如下：

import "./styles.css";

export default function App() {
  const containerStyles = {
    display: "flex",
    flexDirection: "column",
    backgroundColor: "green",
    marginRight: "10px",
    flex: "1 1 0%",
    minWidth: 0,
  };

  const descriptionStyle = {
    overflowWrap: "break-word",
  };

  return (
    <div style={{ display: "flex" }}>
      <div style={containerStyles}>
        <div>Title 1</div>
        <div style={descriptionStyle}>Description 1</div>
        <div>Click to view detail</div>
      </div>
      <div style={containerStyles}>
        <div>Title 2</div>
        <div style={descriptionStyle}>Description 2 veryyyy longgggggggggggggggggggggg</div>
        <div>Click to view detail</div>
      </div>
      <div style={containerStyles}>
        <div>Title 3</div>
        <div style={descriptionStyle}>Description 3</div>
        <div>Click to view detail</div>
      </div>
    </div>
  );
}

关键说明 #

• flex: 1 1 0%：0%作为基准宽度，配合flex-grow:1让所有子项强制平分父容器空间，确保宽度一致；flex-shrink:1保证子项在空间不足时能正常收缩。
• minWidth:0：取消flex子项默认的“最小宽度等于内容宽度”限制，让子项能严格遵循平分后的宽度。
• overflowWrap: break-word：让长文本在单词内部换行，避免文本溢出导致容器变形。

调整后，无论描述内容长短，所有Flex子项都会保持相同的宽高，完全不需要固定值。

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