Question

我正在尝试创建一个Flexbox行，其中包含两个长度可变的字符串项，当字符串不合适时，它们会用椭圆形截断。

似乎很容易，并且可以使用：

.flex-parent {
  display: flex;
}

.flex-child {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 50%;
}

但是，偶尔字符串会很短，例如“ N / A”，在这种情况下，我希望该对中的另一个字符串占用尽可能多的空间，该空间将超过最大宽度：50 ％。

最大宽度为50％，以防止非常长的字符串以与非常短的字符串相同的速率收缩。即，如果没有它，它将像这样截断： N / ...一个很长的字符串，里面有很多单词...

相反，理想的行为是两个字符串都长于父容器一半时占据相等的空间。但是，当一个字符串小于50％时，将显示整个字符串，而另一个字符串将占用所有剩余空间。

由于该行为取决于父级大小，自己字符串的长度和OTHER字符串的长度，因此所有内置的flex-basis，flex-grow / flex-shrink似乎都无济于事。

有人解决过吗？