Min width smaller than content for nested flexbox

Why won't the blue outlined div in this fiddle shrink past the size of it's content without wrapping even when min-width is set to a low value? The fixed width div must stay in the same container.

My goal is to have the text be cut off by ellipsis somewhat, but have it's parent wrap once it is a smaller width. Say 100px for example.

See fiddle here https://jsfiddle.net/jacksonkerr2/2kow9gd1/56/ or below

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

Do it like below:

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

Min width smaller than content for nested flexbox

Related

Recent Posts