inline-flex布局下width:auto容器的宽度规则是什么？如何实现适配内容最宽处的动态宽度？

问题原因 #

inline-flex容器开启flex-wrap: wrap时，自动宽度的计算逻辑是：先将所有子元素按不换行排列计算总宽度，以此作为容器的基础宽度，再执行换行逻辑。你给每个.container设置了width: 100%，这个百分比是基于父容器宽度的，最终就会导致容器宽度等于所有子元素不换行排列的总宽度，而非最宽单个子元素的宽度，所以会出现宽度偏大、随子元素总字符数变化的问题。

解决方案 #

你要实现的是纵向排列的多行列表，不需要用flex-wrap: wrap实现换行，直接修改父容器的flex方向为纵向即可。inline-flex纵向排列时，容器宽度会自动适配最宽的子元素宽度，同时子元素设置width: 100%可以保证每行都撑满容器，左右两列自动对齐：

.main {
  width: auto;
  background: rgb(233, 148, 148);
  display: inline-flex;
  /* 替换原来的flex-wrap: wrap */
  flex-direction: column;
}

.container {
  display: flex;
  width: 100%;
}

.label,
.value {
  flex: 1;
  padding: 4px;
}

.label {
  text-align: end;
  border-right: 2px solid red;
}

.value {
  text-align: start;
}

该方案无需修改HTML结构，也不需要引入grid布局，仅调整两行CSS即可满足需求：容器宽度适配最宽行的内容宽度，左右两列自动对齐均分宽度，兼容性覆盖所有主流现代浏览器。

内容的提问来源于stack exchange，提问作者O. Aroesti