Настроить, какие изгибаемые элементы могут быть расширены на одну строку в гибкой матрице

Question

Я хочу создать матрицу (или таблицу, если хотите), используя flex. Я хочу иметь строки с заголовками двух видов.

1. Никакие заголовки переноса никогда не должны переносить и вырезать текст с помощью многоточия .
2. Осторожные обертки, которые не расширяют свой ряд, но могут переноситься, если другие ячейки расширяют ряд. Они обернутся настолько, насколько смогут , а затем обрежут остальную часть многоточием .

Это второй, который я не понял, как достичь. Я посмотрел на некоторые изгибные свойства, которые звучат так, как будто они приближают мой эффект к желаемому Они не работали, но я включил их в качестве комментариев в соответствующий класс.

Краткий пример с разметкой и стилем, которые у меня сейчас есть.

Ищите решения без JS, так как я бы, скорее, предпочел бы иметь каждую строку заголовка без переноса, чем добавлять кучу кода. Если вы порекомендуете код, чтобы это исправить, я, конечно, по-прежнему посмотрю на него.

HTML

.matrix {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  min-width: min-content;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.cell {
  width: 100px;
  border: 1px solid black;
  flex: 1 0 auto;
}

.no-wrap {
  text-overflow: ellipsis;
  white-space: nowrap;
  hyphens: none;
  overflow: hidden;
}

.careful-wrapper {
  /* flex-basis: fill; */
  /* flex: initial; */
}

.expander {
  text-overflow: wrap;
}

<div class="matrix">
  <div class="row">
    <div class="no-wrap cell">My text should never wrap, no matter the sibling</div>
    <div class="expander cell">My content should wrap lines and therefor allow as many line-breaks to my sibling</div>
    <div class="expander cell"></div>
  </div>
  <div class="row">
    <div class="careful-wrapper cell">My text-should only wrap if my sibling divs expand the row. To see the effect my content needs to be longer than my siblings, excuse my rambling</div>
    <div class="expander cell"></div>
    <div class="expander cell">My content should wrap lines and therefor allow as many line-breaks to my sibling</div>
  </div>
</div>

скрипка