应用省略号一个子元素，而不是其他

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。在跨距2设置一个硬编码的宽度（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是跨距2的宽度（DIV2）