CSS Flex布局中包含input的元素设置宽度后出现额外空白如何解决

问题原因 #

这是CSS百分比宽度在父元素宽度为auto时的特殊计算逻辑导致的，核心原理如下：

• .parent为纵向flex容器，默认交叉轴（水平方向）对齐规则为stretch，普通.content子项会被拉伸到和.parent等宽。
• 你给第一个.content设置了align-self: flex-end，覆盖了默认的拉伸规则，此时.content的宽度默认为auto，由内部内容的宽度决定。
• 当子元素设置百分比宽度，而父元素宽度为auto时，浏览器会执行两步计算：
  1. 先忽略子元素的百分比宽度，按内部内容的固有宽度（label宽度 + input默认的原生宽度）计算得到父元素.content的宽度。
  2. 再将.input-field的宽度设置为第一步得到的.content宽度的20%。
• 最终.content被input的默认宽度撑得很宽，但.input-field实际仅占其20%宽度，剩下的区域就是你看到的多余空白。

解决方法 #

如果你的需求是让.input-field的宽度为.parent宽度的20%，同时保持右对齐，修改第一个.content的样式即可：

.content:nth-child(1) {
  display: flex;
  width: 100%; /* 让.content和.parent等宽，百分比计算基准变为.parent宽度 */
  justify-content: flex-end; /* 内部子项右对齐，替代原来的align-self规则 */
}

修改后.input-field的20%宽度会基于.parent的宽度计算，不会出现多余空白，同时也能满足你限制input宽度的需求。

内容的提问来源于stack exchange，提问作者j.xiang