如何阻止设置display: flex的容器被拉伸至占满表格单元格宽度

核心原因是display: flex默认是块级弹性容器，会自动占满父元素（表格单元格）的可用宽度，要让它宽度仅适配内容，有两种可行方案：

方案1：改用行内弹性盒（最推荐） #

直接把.stack-container的display属性改成inline-flex即可，既保留flex布局的特性，又能像行内元素一样宽度随内容自适应：

.stack-container {
  position: relative;
  display: inline-flex; /* 替换原来的flex */
}

这个方案和你提到的display: inline不拉伸的逻辑一致，同时完全保留flex的布局能力，不会影响子元素的flex相关设置，也不会破坏你绝对定位的小图标偏移逻辑。

方案2：显式设置宽度适配内容 #

如果业务场景必须保留display: flex的块级属性，可以给容器加width: fit-content强制宽度适配内容：

.stack-container {
  position: relative;
  display: flex;
  width: fit-content;
}

该属性在所有现代浏览器中兼容性完善，仅老旧IE浏览器不支持。

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