CSS Grid：如何阻止长文本单元格决定所在列宽度

我当前的两列inline-grid布局中，多数行内容较短，仅最后一行首个单元格包含长文本。设置display: inline-grid和grid-template-columns: auto auto后，容器宽度能自适应短文本且不换行，但长文本会撑宽整个列和容器，我需要让这个长文本自动换行，同时不影响列宽的计算（列宽由前面的短文本决定）。

现有代码如下：

.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-gap: 3px;
  border: 1px solid darkcyan;
}

.cell1 {
  text-align: right;
  background-color: rgba(0, 0, 0, 0.35);
}

.cell2 {
  text-align: left;
}

.cell1-special {
  grid-column: 1 /span 1;
  align-self: left;
  background-color: rgba(128, 0, 0, 0.35);
}

<div class="grid-container">
  <div class="cell1">total number N=</div>
  <div class="cell2">100 ... 200</div>
  <div class="cell1">repeat number M=</div>
  <div class="cell2">1 or 2</div>
  <div class="cell1">rate r=</div>
  <div class="cell2">0.1-0.2</div>
  <div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="cell2"></div>
</div>

由于文本由服务器动态生成，无法使用固定宽度的fit-content(xxxpx)方案，但需要达到类似该方案的效果：列宽由短文本决定，长文本自动换行。

解决方案：通过CSS限制特殊单元格的宽度计算 #

只需给特殊单元格添加两个核心属性，就能实现需求：

.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-gap: 3px;
  border: 1px solid darkcyan;
}

.cell1 {
  text-align: right;
  background-color: rgba(0, 0, 0, 0.35);
}

.cell2 {
  text-align: left;
}

.cell1-special {
  grid-column: 1 / span 1;
  background-color: rgba(128, 0, 0, 0.35);
  /* 核心修改 */
  width: 0;
  min-width: 100%;
  text-align: right; /* 保持与其他cell1的对齐方式 */
}

原理说明：

• width: 0：强制该单元格在计算列宽时不占用空间，让列宽完全由前面的.cell1单元格的最大内容宽度决定。
• min-width: 100%：让单元格实际占满当前列的宽度，这样内部的长文本就会自动换行，不会超出列宽。

这个方案完全依赖CSS实现，不需要固定宽度，能自适应服务器生成的短文本内容，同时让长文本自动换行，完美贴合需求。

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