flex-grow:3设置无效 无法按3:1比例分配flex子元素宽度

flex-grow 属性的作用是分配flex容器的剩余空闲空间，无法单独实现子元素按固定比例分配总宽度的效果，当前样式不生效的核心原因有两点：

• 仅给section.form-area设置了flex-grow: 3，同级元素section.image的flex-grow为默认值0，渲染时会优先按section.image内部的图片、文本内容计算它的实际宽度，剩余空间才会分配给form-area，无法达成1:3的宽度比例。
• 未给flex子项设置flex-basis属性，默认值auto会让子项宽度优先适配内容尺寸，尤其图片属于不可自动收缩的替换元素，会直接撑开父容器宽度，覆盖grow的空间分配规则。

给两个同级flex子项统一设置按比例分配的flex简写属性，同时加上宽度溢出约束，即可实现form-area宽度为image区域3倍的效果：

section.image {
  display: flex;
  flex: 1; /* 占1份宽度，等价于flex-grow:1; flex-shrink:1; flex-basis:0% */
  min-width: 0; /* 允许容器收缩，避免内部内容撑破宽度比例 */
}

section.form-area {
  display: flex;
  flex-direction: column;
  flex: 3; /* 占3份宽度 */
  min-width: 0;
}

原理说明：使用flex简写设置比例时，flex-basis: 0%会让浏览器在计算宽度时先将所有子项的基础宽度置为0，再严格按照flex-grow的比例分配父容器的总宽度，不会被子元素的内容宽度干扰。

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