绝对定位Flex容器自适应内容宽度问题求助

设置绝对定位的Flex容器时出现问题：容器采用flex-direction: column布局，开启flex-wrap: wrap并设置max-height，内容换行后容器背景无法适配实际内容宽度。

最小可复现示例（MCVE） #

运行以下代码可见，容器背景未贴合内容，容器宽度小于实际生成的多列列表宽度：

CSS #

#foo {
  position: absolute;
  background-color: wheat;
  border: 1px solid #aaa;
  padding: 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 50%;
}

span {
  padding: 4px;
}

HTML #

<div id="foo">
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
  <span>Foo Bar Baz</span>
</div>

需求与限制 #

需要让容器动态适配内容总宽度，且满足以下限制：

• 必须保留容器的绝对定位
• 不能设置px、%、vw等固定宽度值（width:100%不符合要求）
• fit-content无效
• 用绝对定位容器包裹Flex容器无效

问题根源（基于CSS Flexbox 1规范） #

绝对定位的Flex容器在尺寸计算时，若left/right为auto，默认仅计算第一列内容的首选宽度，不会将换行后新增列的宽度纳入总宽度计算，导致容器宽度无法覆盖所有列的实际宽度。

解决方案 #

给容器添加width: max-content，该属性会计算所有内容展开后的总宽度（包含换行后的多列宽度总和），完美适配内容：

#foo {
  position: absolute;
  background-color: wheat;
  border: 1px solid #aaa;
  padding: 4px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 50%;
  width: max-content;
}

若需兼容旧版浏览器，可补充前缀兼容：

width: -webkit-max-content;
width: max-content;

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