防止在新生产线上使用柔性显示器

Question

我有一位父母和两个主要的孩子。第一个孩子有两个固定宽度和高度的元素。第二个孩子有一些文本，当我调整文本大小时显示或隐藏。但是当我调整某一点时，第一个孩子的两个要素保持在线，他们一个在另一个之上。我怎样才能防止这一点？

所以第二个图像中的两个元素是一个以上其他，我不想这样。

小提琴：jsfiddle

HTML

<div class="parent-div"> 
    <div class="icon-div"> 
     <div>a</div> 
     <div>a</div> 
    </div> 
    <div class="text-div">This is text I'd like to truncate when space doesn't permit</div> 
</div> 

CSS

.parent-div { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: flex; 
} 

.text-div { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: hidden;  
    min-width: 0; 
} 

.icon-div { 
    -webkit-flex: 1; 
    -moz-flex: 1; 
    flex: 1; 
} 

.icon-div div { 
    display:inline-block; 
    border: 1px solid #ccc; 
    width:40px; 
    height:40px; 
} 

Answer 1

不要让你的.icon-div缩小（flex: 1 0 auto）;

.icon-div { 
    flex: 1 0 auto; 
} 

设置：white-space:nowrap具有通过icon-div具有text-div运行中的文本所占用的空间时，屏幕过小的不幸的副作用。

Answer 2

尝试添加white-space: nowrap;您icon-div类：

.icon-div { 
    -webkit-flex: 1; 
    -moz-flex: 1; 
    flex: 1; 
    white-space: nowrap; 
}