场景:
父元素存在两个子元素时,其中一个子元素宽度根据内容弹性,如设置了min-width属性
另一个子元素要实现其宽度自动填充父元素的剩下空间,但又要其保持block属性便于做溢出省略显示时,设置flex-grow属性为1即可。
样例:
.parent {
width: 200px;
.child_one {
min-width: 30%;
}
.child_tow {
flex-grow: 1; //自动填充剩下宽度
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;//溢出文本省略
}
}