防止Flexbox显示在新行中

Question

我有一个父母和两个主要的孩子。第一个孩子有两个固定宽度和高度的元素。第二个孩子有一些文本，当我调整文本大小时，会显示或隐藏文本以响应页面大小。但是当我在某个时刻调整大小时，第一个孩子的两个元素仍然保持内联，他们一个在另一个之上。我该如何防止这种情况？

所以在第二张图片中，这两个元素是一个在另一个之上，我不想要这个。

小提琴：jsfiddle

HTML

lock

CSS

<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>

Answer 1

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

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

设置：white-space:nowrap会产生令人遗憾的副作用，即当屏幕变得太小时，text-div中的文字会遇到icon-div占用的空间。

Answer 2

尝试将white-space: nowrap;添加到icon-div班级：

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