如何让flex容器收缩到刚好适配内容的最小合理尺寸？

问题根因 #

display: flex声明的容器默认是块级元素，块级元素默认宽度为100%父容器宽度，和内部子元素总宽度无关，因此即使子元素没有占满宽度，容器本身还是会撑满整行， hover区域自然包含了右侧空白部分。你设置margin-right: auto只是把容器右侧的剩余空间用外边距填充，容器本身的宽度没有变化，因此不会生效。

解决方案 #

• 方案1：替换flex容器的display属性为inline-flex
  这是最直接的解决方式，inline-flex声明的容器属于行内级flex容器，宽度会默认由内部子元素的总宽度撑开，刚好贴合内容边界，不会主动撑满父容器的整行宽度。如果不需要额外的右侧外边距，去掉你原示例中的margin-right: 10rem即可。修改后的代码如下：

.flex-container {
    display: inline-flex;
    column-gap: 1rem;
    align-items: center;
    cursor: pointer;

    &:hover {
        opacity: 0.6;
    }
}

注意你原示例中的CSS代码缺少了属性结尾的分号和嵌套规则的大括号，实际使用时需要补全避免语法错误。

• 方案2：保留块级flex容器特性，添加width: fit-content属性
  如果你的场景需要容器保持块级特性（比如需要独占一行，不与其他行内元素同排），可以给容器添加width: fit-content属性，该属性会让块级元素的宽度自动收缩到刚好贴合内容的大小，效果和方案1一致：

.flex-container {
    display: flex;
    width: fit-content;
    column-gap: 1rem;
    align-items: center;
    cursor: pointer;

    &:hover {
        opacity: 0.6;
    }
}

该属性兼容目前所有主流浏览器，仅需要兼容IE浏览器时需要额外适配。

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