css - 阻止显示: flex from stretching to full width of table cell

Question

我有一个具有最小宽度和可变列数的表格。但第一列将始终具有相同的内容，带有几个图标的容器堆叠在一起。

我需要在容器上使用 display: flex ，但这会将其拉伸(stretch)到列的整个宽度，这会破坏我的布局，请参见下面的示例:

table {
  width: 500px;
  background-color: tan;
}

.stack-container {
  position: relative;
  display: flex;  /* This is the troublemaker */
}

.icon1 {
  font-size: 22px;
}

.icon2 {
  position: absolute;
  right: -2px;
  bottom: -3px;
}

<table>
  <tr>
    <td>
      <span class="stack-container">
        <span class="icon1">A</span>
        <span class="icon2">o</span>
      </span>
    </td>
    <td>Two</td>
  </tr>
</table>

如何防止 .stack-container 与 display: flex 拉伸(stretch)到表格单元格的整个宽度并使其仅拉伸(stretch)到其内容的宽度？

我想要实现的目标示例:

注意1:当 .stack-container 为 display: block 时，它也会被拉伸(stretch)。

注意2:当 .stack-container 为 display: inline 时，它不会拉伸(stretch)到表格单元格的整个宽度。

Answer 1

说实话，我不确定你到底想做什么，但尝试使用 inline-flex 而不是 flex