如何控制Flex容器内盒子尺寸不被挤压，保证指定盒子优先遵循设定宽度

问题根因 #

这是Flex布局的默认收缩规则导致的：Flex容器的直接子元素（flex item）默认flex-shrink属性值为1，当所有子元素的总宽度超过Flex容器的可用宽度时，所有子元素会按照收缩系数的比例压缩自身宽度来适配容器。
你当前场景中，左右两个盒子的内容宽度+内边距+中间盒子的100px总和已经超出了.content容器的总宽度，三个子元素同时被压缩，而中间盒子无内容填充，压缩后仅剩下约15px的宽度。

最优解决方案 #

要让指定的flex子项宽度固定不被挤压，只需要给该元素设置flex-shrink: 0，关闭它的收缩能力即可，这是优先级最高的固定flex子项尺寸的方案：

.center {
  width: 100px;
  height: 100%;
  flex-shrink: 0; /* 禁止该元素被压缩 */
}

如果你需要左右两个盒子平分除中间100px之外的剩余容器宽度，刚好适配你设置的50%对半的渐变背景，可以给左右盒子增加flex: 1属性，让它们自动伸展填充剩余空间：

.left {
  flex: 1;
  padding: 60px 60px 60px 130px;
}

.right {
  flex: 1;
  padding: 60px 130px 60px 60px;
  color: white;
}

flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写，作用是让元素优先占满容器剩余的可用空间。

内容的提问来源于stack exchange，提问作者m3.b