Getting text to overflow while having display:flex

Question

I am attempting to get text to overflow on this div while having display:flex set. Here is a codepen with the issue I am looking to solve.

.innerPillPlainText {
  display: flex;
/*   display: block; */
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
/*   min-width: 0px; */
}

/* .pillWithHoverByDefault {
 min-width: 0px; 
}
 */
.outerdiv {
  padding: 10px;
  background: lightblue;
}

<div class="outerdiv">
  <div id="Flyout-0" tabindex="-1" class="pillWithHoverByDefault" role="option" title="Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet consectetur adipisicing elit">
    <div class="innerPillPlainText">Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet consectetur adipisicing elit
    </div>
 </div> 
</div>

codepen

When I set display:block instead of display:flex, it works fine.

I looked around and one of the solutions suggested was to set a min-width:0px on the flex child. However, this does not seem to work for me.