Flex text wrapping

HTML

<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>

CSS

.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;
}