<div class="flex-parent">
  <div class="child no-ellipsis">
    This is "fixed", don't truncate it!
  </div>
  <div class="child ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet, metus sit amet convallis porttitor, libero mauris porta ante, ac varius nisl augue in mi. Cras at lorem at orci sagittis pretium eu ut lorem.
  </div>
</div>
.flex-parent {
  width: 500px;
  display: flex;
  flex-wrap: nowrap;
  border: 1px solid red;
  padding: 10px;
  margin: 10px;
}

.child {
  margin: 0 10px;
}

.no-ellipsis {
  flex-shrink: 0;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.