flex布局下子div设置width:70px实际仅64px如何解决

Flex布局的子项默认开启收缩特性，对应属性为flex-shrink: 1：当父容器空间不足以容纳所有子项的宽度总和时，子项会按比例自动收缩。你右侧的内容区域设置了width: 100%，会占满整个父容器的宽度，导致左侧绿色div被挤压，最终实际宽度小于你设置的70px。

• 方案1：给绿色div禁用收缩属性，这是最简单的修改方式
  直接在绿色div的样式中添加flex-shrink: 0即可。同时建议把右侧内容区的width: 100%替换为flex: 1，让它自动填充剩余空间，更符合flex布局规范，避免宽度溢出问题。
  修改后的完整代码：

<div class="parent">  
  <div style="width:70px; flex-shrink:0; background: green; height: 50px"></div>
  <div style="flex:1; background: rgba(0,0,0,.4)">a</div>
</div>

• 方案2：用flex属性直接固定宽度，兼容性更好
  可以用flex的缩写属性直接固定绿色div的宽度，不需要单独写width，写法更简洁：

<div style="flex: 0 0 70px; background: green; height: 50px"></div>

这里的flex: 0 0 70px依次对应flex-grow: 0（不主动扩大）、flex-shrink: 0（不被挤压缩小）、flex-basis: 70px（基础宽度为70px），可以完全保证元素宽度固定为70px。

内容的提问来源于stack exchange，提问作者Adrián