html - 将省略号应用于一个子元素，而不应用于另一子元素

我有以下布局：

<div>
  <div1>
    <span1></span>
    <span2></span>
  </div>
  <div2>
    <span></span>
    <span></span>
  </div>
</div>

Div1具有flex-grow: 1属性，因此它可以占用所需的所有可用空间。
当div1占据了它需要的所有空间，当浏览器窗口变小时，span1应该得到省略号，而span2不应该得到省略号。
我该怎么做？我尝试了flex的各种用途，添加了更多div，更改了宽度，但都没有成功。
干杯。

最佳答案

我最后做的是把span1和span2都变成div。在span2（div2）上设置硬编码宽度，然后将span1（div1）上的宽度设置为

max-width: -moz-calc(100% - 110px);
max-width: -webkit-calc(100% - 110px);
max-width: -o-calc(100% - 110px);
max-width: calc(100% - 110px);

其中110px是span2（div2）上的宽度

关于html - 将省略号应用于一个子元素，而不应用于另一子元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40683237/