css - 防止 flexbox 在新行中显示

Question

我有一个 parent 和两个主要的 child 。第一个 child 有两个固定宽度和高度的元素。第二个 child 有一些文本，当我调整文本大小时，会根据页面大小显示或隐藏文本。但是，当我在某个点调整大小时，第一个 child 的两个元素要求保持内联，它们相互重叠。我怎样才能防止这种情况？



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

fiddle :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不幸的副作用是在 text-div 中包含文本碰到 icon-div占用的空间当屏幕变得太小时。