React组件中fieldset嵌套textarea并排布局异常问题咨询

核心问题分析 #

你的问题主要由两个因素导致：

• fieldset 自带默认的 margin、padding 和 border，这些样式会挤占flex项的可用宽度，导致实际占比超出容器限制，触发收缩行为
• flex布局中，flex项默认min-width: auto，当内部textarea的默认宽度不足时，flex项会自动收缩，无法保持预期的50%占比

具体修复方案 #

1. 重置容器与flex项的基础样式

给外层formContainer明确flex方向（默认是row，显式声明更稳妥），同时给每个inputBox设置以下样式：

• flex: 1 1 calc(50% - 间距值/2)：如果需要给两个组件留白，用calc减去一半间距，避免总宽度溢出容器
• box-sizing: border-box：让padding、border纳入宽度计算，避免额外挤占空间
• margin: 0：重置fieldset的默认外边距
• min-width: 0：解除flex项的最小宽度限制，确保能按设置比例收缩或展开

2. 让textarea占满父容器宽度

给textarea设置width: 100%，同时重置它的默认边框、内边距样式，确保完全填充fieldset的可用空间，避免因textarea自身默认宽度导致父容器收缩。

示例代码 #

假设使用内联样式实现：

const FormContainer = () => {
  const formContainerStyle = {
    display: 'flex',
    gap: '12px', // 两个输入框之间的间距
    width: '100%',
  };

  const inputBoxStyle = {
    flex: '1 1 calc(50% - 6px)', // 减去一半gap值，保证总宽度不溢出
    boxSizing: 'border-box',
    margin: 0,
    padding: '8px',
    border: '1px solid #ddd',
    minWidth: 0,
  };

  const textareaStyle = {
    width: '100%',
    height: '120px',
    border: 'none',
    padding: '6px',
    resize: 'vertical', // 可选，允许垂直调整高度
    outline: 'none',
  };

  return (
    <div style={formContainerStyle}>
      <fieldset style={inputBoxStyle}>
        <textarea style={textareaStyle} placeholder="输入内容1" />
      </fieldset>
      <fieldset style={inputBoxStyle}>
        <textarea style={textareaStyle} placeholder="输入内容2" />
      </fieldset>
    </div>
  );
};

如果使用CSS模块或styled-components，只需将对应样式迁移到样式文件即可。

额外说明 #

如果不需要输入框自适应伸缩，也可以直接设置flex: 0 0 50%固定宽度，配合box-sizing: border-box和fieldset默认样式重置，同样能实现各占50%并排的效果。

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