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

Question

我有以下布局：

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

Div1拥有属性flex-grow: 1，因此可以占用所需的所有可用空间。

当div1占用所需的所有空间时，当浏览器窗口变小时，span1应该得到省略号，而span2则不应该。

我该怎么做？我尝试过各种flex的使用，增加了更多的div，并且没有成功地改变宽度。

干杯。

Answer 1

我最终做的是将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）上的宽度