I want to create a matrix (or table if you will) using flex. I want to have rows with headers of two kinds.
- No wrap headers should never wrap and cut text with an ellipsis.
- Careful wrappers that do not expand their row, but can wrap if the other cells expand the row. These would wrap as much as they can, and then cut the rest of with an ellipsis.
It is the second one that I have not figured out how to achieve. I have looked at some flex properties that sounded as they might take my closer to the effect that I want. These did not work, but I have included them as comments in the corresponding class.
Brief example with the markup and styling that I have now.
Looking for solutions without JS, as I'd probably rather settle with having every header row with no wrapping than add a bunch of code. If you do suggest code to fix this, I will of course still have a look at it.
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>