Question

将svg与flexbox或网格混合发生。

请参见以下简化示例：

div {
  display: flex;
  width: 100%;
}

span {
  flex: initial;
}

svg {
  width: 0;
  height: 100%;
  border: 3px solid black;
  flex: auto;
}

<div>
  <span>Ala ma kota. A kot ma Alę</span>
  <svg>
    <rect height="100%" width="100%" fill="red"></rect>
  </svg>
</div>

问题发生得非常不一致（似乎取决于周围的盒子大小，而盒子的大小又取决于屏幕的大小和缩放-至少这是我的假设），所以如果您看不到它，让我告诉您我在这里看到的屏幕截图：

看到红色图像及其边框之间的这个虚假的空白吗？它是最右边的边框。

在我的用例中，这个空间看起来不仅难看，而且几乎是不可接受的：我正在尝试在游戏中实现一个健康条，并且该空间暗示该条即使已满也未满。

为什么会发生这种空间，有什么办法摆脱它？

（Firefox，如果需要的话。）

Answer 1

我尝试调整firefox的大小，但没有运气来复制空白。当放大和缩小时，我看到它发生在chrome上。当我检查元素时，会有一些奇怪的像素浮点数（例如：10.234px）。像素是普通屏幕中最小的单位，因此普通屏幕可以显示上述奇怪的结果。在某些视网膜设备中，它可能工作良好。

P / S：有一种摆脱它的棘手方法，当您的角色处于完全健康状态时，您将svg标签的背景色设置为“红色”，我曾尝试过这种方法并看到空白消失了