Flexbox容器设置flex-wrap:wrap后子元素仍无法正常换行如何解决

问题根因 #

• 承载左侧文本、右侧表单的直接父级flex容器（对应代码里padding:"20px",display:"flex"的div元素）未添加flex-wrap: wrap属性，换行规则未生效
• 左右两个子元素仅设置了max-width: 50%，未配置最小宽度限制，页面缩小时两个元素会无限收缩，永远达不到换行触发阈值

修复步骤 #

1. 给上述父flex容器添加flexWrap: "wrap"样式规则
2. 给左右两个子元素添加flex: 1 1 320px的样式，其中320px为触发换行的最小宽度阈值，可根据实际需求调整数值，也可单独设置min-width: 320px实现同等效果

修改后的核心代码示例 #

<div className="contact-container" style={{flexDirection:"column",display:"flex",backgroundColor:"#ECECEC"}}>
  {/* 新增flexWrap: "wrap" */}
  <div style={{padding:"20px",display:"flex",justifyContent:"center", alignItems:"center", flexWrap: "wrap"}}>
    {/* 新增flex: "1 1 320px"，可保留maxWidth控制大屏下的宽度占比 */}
    <div style={{flexDirection:"column", flex: "1 1 320px", maxWidth: "600px", padding:"20px 60px"}}>
      <p style={{color:"#0E2043",backgroundColor:"#ECECEC", fontSize:"22px",fontWeight:"700", textAlign:"justify"}}>If you are looking to enjoy exactly these benefits, Passport Legacy is here to assist you with your second citizenship. </p>
      <p style={{color:"#0E2043", paddingTop:"30px",backgroundColor:"#ECECEC", textAlign:"justify"}}>If you would like more information about any of the qualifying programs, or our services, please do not hesitate to contact us.</p>
    </div>
    {/* 同样新增flex: "1 1 320px"，调整maxWidth配置 */}
    <div style={{flex: "1 1 320px", maxWidth: "600px",padding:"20px"}}>
      <div style={{padding:"30px"}}>
        <div style={{display:"flex", flexDirection:"column"}}>
          <div style={{padding:"5px"}}>
              <input required className="contactInput" style={{padding:"5px", width:"100%"}} type="text" placeholder="Name" name="name"/>
              </div>
            <div style={{display:"flex",flexDirection:"row", flexWrap:"wrap", justifyContent:"space-between"}}>
            <div style={{padding:"5px", flex: "1 1 140px"}}>
            <input required className="contactInput" style={{padding:"5px",width:"100%"}} type="text" placeholder="Email" name="email"/>
            </div>  
            <div style={{padding:"5px", flex: "1 1 140px"}}>
            <input required className="contactInput" style={{padding:"5px",width:"100%"}} type="text" placeholder="Phone" name="phone"/>
            </div>
            </div>
            <div style={{padding:"5px"}}>
              <input required className="contactInput" style={{padding:"5px", width:"100%"}} type="text" placeholder="Subject" name="subject"/>
              </div>

              <div style={{padding:"5px"}}>
              <textarea required className="contactInput" style={{padding:"5px", width:"100%"}} rows="4" placeholder="Message" name="message"/>
              </div>
              <div style={{padding:"5px"}}>
              <input required className="contactInput" style={{padding:"5px", width:"100%",color:"white",backgroundColor:"#0E2043"}} type="submit" value="SUBMIT"/>
              </div>
          </div>
        </div>
    </div>
  </div>
</div>

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