是否可以将带有display flex的td设置为全高，或者使用不同的CSS来达到相同的效果？

Question

我继承了一个项目，其中有人决定将 a 设置display为tdto flex。这样做的后果之一是，当td行中有其他 s 跨越多行时，tdwithdisplay: flex不会拉伸到其他 s 的高度td。

解决这个问题的正确方法（我认为）是display: flex从 the 中删除td并将其放在内部div，但我目前只有修改 CSS 的权限，所以我想知道是否有任何方法可以用 CSS 修复它仅（同时保留布局，如td下面的代码片段所示）？

编辑：所需的布局是在 内有左侧和右侧td，右侧是span一个彩色点。即使在移动设备上，当颜色点td非常窄并且左侧最终包裹起来时，彩色点也需要始终在右侧和顶部对齐。

table td {
  border: 1px solid black;
}

td.flex {
  display: flex;
  justify-content: space-between;
}

span.right {
  display: inline-block;
  margin-left: 1em;
  width: 1em;
  border-radius: 50%
}

span.red {
  background-color: red;
}

span.green {
  background-color: green;
}

<table>
  <tbody>
    <tr>
      <td class="flex"><span>Left </span><span class="right red">&nbsp;</span></td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
    <tr>
      <td class="flex"><span>Left side longer </span><span class="right red">&nbsp;</span></td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
    <tr>
      <td>
        <div class="flex"><span>The right way to do it </span><span class="right green">&nbsp;</span></div>
      </td>
      <td>td with<br>multiple rows<br>blah blah blah</td>
    </tr>
</table>

Answer 1

设置宽度，使右侧<span>占据 2.3rem ( width: 1.15rem; margin-left: 1.15rem)，左侧<span>占据其余宽度<td>。请注意，它们em被替换为，rem因为它们不受级联样式和继承的影响：

span:first-of-type {
  width: calc(100% - 2.3rem);
}

在示例中，所有<td>和<span>都是相同的，以演示样式对于左侧不同长度的文本的行为方式<span>。在移动尺寸上对其进行了测试，它始终垂直居中，并且点始终位于最右侧，从未移动。由于更改em为rem并添加 ，形状也始终为圆形height: 1.15rem;。这比flexbox.

span:first-of-type {
  width: calc(100% - 2.3rem);
}

:root {
  font: 2ch/1 'Segoe UI';
}

table td {
  border: 1px solid black;
}

span {
  display: inline-block;
  border: 0;
  vertical-align: middle;
}

span:first-of-type {
  width: calc(100% - 2.3rem);
}

span.right {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 1.15rem;
  border-radius: 50%;
}

span.red {
  background-color: red;
}

span.green {
  background-color: green;
}