<div class="flex-parent">

  <div class="flex-child long-and-truncated">
    1. This is a long string that is OK to truncate please and thank you
  </div>
  
  <div class="flex-child short-and-fixed">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
</div>

<div class="flex-parent has-child">

  <div class="flex-child long-and-truncated-with-child">
    <h2>2. This is a long string that is OK to truncate please and thank you</h2>
  </div>
  
  <div class="flex-child short-and-fixed">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
</div>

<div class="flex-parent has-child">

  <div class="flex-child long-and-truncated-with-child-corrected">
    <h2>3. This is a long string that is OK to truncate please and thank you</h2>
  </div>
  
  <div class="flex-child short-and-fixed">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
</div>
.flex-parent {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 30px 0;
}
h2 {
  font-size: 1rem;
  font-weight: normal;
}


.long-and-truncated {
  flex: 1;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.short-and-fixed {
  white-space: nowrap;
  > div {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: lightgreen;
    display: inline-block;
  }
}

.long-and-truncated-with-child {
  flex: 1;
  h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.long-and-truncated-with-child-corrected {
  flex: 1;
  min-width: 0; /* or some value */
  h2 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

body {
  padding: 40px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.