这取决于你的页面是如何创建的，手动还是使用JS。但是如果你可以设法添加一个带有--char-count自定义属性的内联样式，你可以使用flex简写来获得一个通用的解决方案：

.item { flex: var(--char-count, 1) } /* or defaults to: 1 1 0% */

不要使用flex-grow，因为对于此解决方案，flex-basis实际上需要是0%
flexbox的有趣之处在于，当使用不同的flex-grow值（如flex）时，该机制将使用各种定义的flex-grow值来分配可用空间。
顺便说一句：在CSS var（..，fallback）中，如果需要，fallback 值也可以是0，导致flexbox默认值flex-grow: 0用于'unset'项目。

.container {
    display: flex;
    width: 10em;
}
.item {
    flex: var(--char-count, 1); /* fallback 1 if 'unset' */
    text-align: center;
    padding: 0.5rem 1rem;
    border: solid black 1px;
}

<div class="container">
    <div class="item" data-ghost-content="BCD" style="--char-count: 3">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>

是的，您可以使附加内容visibility: hidden;，它将占用空间但不会显示：

.container { display: flex; width: 10em; }
.item { flex-grow: 1; text-align: center; padding: 0.5rem 1rem;
border: solid black 1px; }
[data-ghost-content]:after {
  content: attr(data-ghost-content);
  visibility: hidden;
}

<div class="container">
<div class="item" data-ghost-content=BC>A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>

在这种方法中，“ghost content”将不包括元素中已经存在的实际可见内容，因此它只是“BC”。
如果希望结果居中，可以为“：before”和“：after”设置“ghost”数据属性。

不知道你能不能稍微调整一下你的结构？

.container { display: flex; width: 10em; }
.item { flex-grow: 1; text-align: center; padding: 0.5rem 1rem;
border: solid black 1px; }
.ghost {
  visibility: hidden;
  height: 0;
}

<div class="container">
<div class="item">
  <div class="item-content ghost">ABC</div>
  <div class="item-content">A</div>
</div>
<div class="item">B</div>
<div class="item">C</div>
</div>

如何添加一个.wrapper，像这样：

<div class="container">
  <div class="item" data-ghost-content="BCD">
    <div class="wrapper">A</div>
  </div>
  <div class="item">
    <div class="wrapper">B</div>
  </div>
  <div class="item">
    <div class="wrapper">C</div>
  </div>
</div>

...然后是一个包含ghost内容的隐藏伪元素。实际内容将被absolute-ly定位，以便不占用任何空间：

[data-ghost-content]::before {
  content: attr(data-ghost-content);
  visibility: hidden;
}

[data-ghost-content] > .wrapper {
  position: absolute;
}

要保留text-align ing，请制作.item flexbox：

.item {
  display: flex;
  justify-content: center;
}

试试看：

.item {
  display: flex;
  justify-content: center;
}

[data-ghost-content]::before {
  content: attr(data-ghost-content);
  visibility: hidden;
}

[data-ghost-content] > .wrapper {
  position: absolute;
}

/* Demo only */

.container {
  display: flex;
  width: 10em;
}

.item {
  flex-grow: 1;
  text-align: center;
  padding: 0.5rem 1rem;
  border: solid black 1px;
}

<div class="container">
  <div class="item">
    <div class="wrapper">E</div>
  </div>
  <div class="item" data-ghost-content="BCD">
    <div class="wrapper">A</div>
  </div>
  <div class="item">
    <div class="wrapper">B</div>
  </div>
  <div class="item">
    <div class="wrapper">C</div>
  </div>
</div>

假设你能够调整HTML，为可见内容包含一个<span>标签，那么我建议使用CSS网格，因为这允许元素在从背景到前景的空间中相互堆叠，如下所示（在代码中有解释性注解）：

.container {
  display: flex;
  width: 10em;
}

.item {
  flex-grow: 1;
  text-align: center;
  padding: 0.5rem 1rem;
  border: solid black 1px;
}

/* setting up CSS grid on .item elements with the
   data-ghost-content attribute: */
.item[data-ghost-content] {
  display: grid;
  /* placing items to the start (on the block-axis, vertical
     in English) and to the center (on the inline-axis,
     horizontal in English); this is in the event of a longer
     "data-ghost-content" attribute being set so the visible
     content is placed similarly to the neighbouring
     elements/content: */
  place-items: start center;
}

.item[data-ghost-content] > span {
  /* placing the <span> in the first column and first row: */
  grid-column: 1;
  grid-row: 1;
}

/* using the ::before pseudo-element to display the
   attribute-value of the data-ghost-content attribute: */
.item[data-ghost-content]::before {
  content: attr(data-ghost-content);
  /* placing the pseudo-element in the first row and column
     of the grid, similarly to the <span> element: */
  grid-column: 1;
  grid-row: 1;
  user-select: none;
  /* hiding the element by setting its visibility to hidden,
     which allows it to retain its space in the document: */
  visibility: hidden;
  /* positioning the pseudo-element behind the <span>: */
  z-index: -1;
}

<div class="container">
  <div class="item" data-ghost-content="BCD">
    <span>A</span>
  </div>
  <div class="item">
    <span>B</span>
  </div>
  <div class="item">
    <span>C</span>
  </div>
</div>

JS Fiddle demo。
参考文献：

• content。
• display。
• grid-column。
• grid-row。
• place-content .
• user-select。
• visibility。
• z-index。