Многострочный список flexbox с переполнением текста: многоточие

ul {
  padding: 0;
  border: 1px solid red;
  list-style-type: none;
}

li {
  margin: 0;
  border-bottom: 1px solid gray;
}

div.icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 15px;
  background-color: lightcoral;
}

span.title {
  flex-grow: 1;
  flex-shrink: 1;
  margin: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

span.tag {
  flex-shrink: 0;
  margin: 15px;
}

span.second-line {
  margin: 15px;
}

.mainHeading {
  display: flex;
}

.subHeading {
  display: block;
}

<ul>
  <li>
    <div class = "mainHeading">
      <div class = "icon"></div>
      <span class = "title">List Item Title</span>
      <span class = "tag">Some tag</span>
    </div>
  </li>
  <li>

    <div class = "mainHeading">
      <div class = "icon"></div>
      <span class = "title">Very Super Long List Item Title With Added Characters to Ensure Truncation</span>
      <span class = "tag">Some tag</span>
    </div>

    <div class = "subHeading">
      <span class = "title">List Item Sub Title</span>
      <span class = "tag">Some another tag</span>
    </div>


  </li>
  <li>
    <div class = "mainHeading">
      <div class = "icon"></div>
      <span class = "title">List Item Title</span>
    </div>
  </li>
</ul>