html - 自定义允许在弹性矩阵中展开一行的弹性项目

Question

我想使用 flex 创建一个矩阵（或表格，如果你愿意的话）。我想要有两种标题的行。

1. 任何换行标题都不应该用省略号来换行和剪切文本。
2. 小心的包装器不会扩展它们的行，但如果其他单元格扩展了行，则可以包装。这些将尽可能多地包裹起来，然后用省略号切割其余部分。

这是我还没有想出如何实现的第二个。我查看了一些听起来可能会让我更接近我想要的效果的 flex 属性。这些不起作用，但我已将它们作为注释包含在相应的类中。

我现在拥有的标记和样式的简要示例。

寻找没有 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>

小提琴

标签： htmlcssflexbox