如何让inline-flex元素的背景尺寸完全适配其内容

问题解决方法 #

你遇到的是inline-flex容器设置flex-wrap: wrap后，容器宽度默认会占满父级可用宽度，无法自动贴合换行后内容实际宽度的问题，只需要给容器添加width: fit-content属性即可实现背景完全适配内容尺寸。
修改后的CSS代码如下：

.flex-container {
  display: inline-flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
  /* 新增以下属性即可 */
  width: fit-content;
  /* 如需兼容低版本浏览器，可补充前缀 */
  width: -webkit-fit-content;
  width: -moz-fit-content;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

fit-content属性会让容器宽度自动匹配内部内容的实际排列宽度，无论是单行还是多行换行场景，都能保证背景完全包裹住所有子元素，不会出现多余的背景空白区域。

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