嵌套弹性盒的最小宽度小于内容

Question

为什么即使 min-width 设置为较低的值，这个小提琴中的蓝色轮廓 div 也不会缩小到其内容的大小而不换行？固定宽度的 div 必须保持在同一个容器中。

我的目标是让文本在某种程度上被省略号截断，但是一旦它的宽度较小，就让它的父级换行。比如说 100px。

在https://jsfiddle.net/jacksonkerr2/2kow9gd1/56/ 或以下查看小提琴

.flex { display: flex; }
.flexwrap { flex-wrap: wrap; }
.grow { flex-grow: 1; flex-shrink: 1; }
.fixedWidth { width: 85px; }

.minw { min-width: 100px !important; }

* {
  min-height: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.red { border: solid 3px red; }
.green { border: solid 3px green; }
.blue { border: solid 3px blue; }
.orange { border: solid orange 3px; }

<div class="flex flexwrap minw">


  <div class="grow red">Searchbox field</div>
  
  <div class="flex grow green">
    <!-- Should not wrap intil some of the text is cut off by ellipsis -->
    <div class="grow blue minw">
      Category Filter with really long text that causes the container to wrap
    </div>
    <div class="fixedWidth orange">Fixed Width</div>
  </div>
  
  
</div>

Answer 1

如下所示：

.flex {
  display: flex;
  flex-wrap: wrap; /* wrap only on the outer container */
}

.blue {
  width: 0; /* 0 width for blue */
  min-width: 100px; /* your minimum width */
  flex-grow: 1;
  /* ellipsis only for blue */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  /**/
  border: solid 3px blue;
}

.orange {
  min-width: 85px; /* the fixed width here as min-width */
  border: solid orange 3px;
}

.green {
  display: flex;
  flex-grow: 9999; /* the green should grow more than the red */
  border: solid 3px green;
}

.red {
  flex-grow: 1; /* red should grow */
  border: solid 3px red;
}

<div class="flex">
  <div class="red">Searchbox field</div>

  <div class="green">
    <!-- Should not wrap intil some of the text is cut off by ellipsis -->
    <div class="blue">
      Category Filter with really long text that causes the container to wrap
    </div>
    <div class="orange">Fixed Width</div>
  </div>


</div>