I have a "table" built using flex and I need to truncate the text in the first column if there isn't enough space, keeping it on a single line all the time.
.parent {
display: flex;
border: 1px solid black;
gap: 10px;
}
.first-column {
border: 1px solid red;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.second-column {
border: 1px solid steelblue;
}
.third-column {
border: 1px solid green;
}
.value-cell {
width: 50px;
text-align: right;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}<div class="parent">
<div class="first-column">
<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="truncate">Ut enim ad minim veniam</div>
<div class="truncate">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</div>
</div>
<div class="second-column">
<div class="value-cell">10</div>
<div class="value-cell">20</div>
<div class="value-cell">99</div>
</div>
<div class="third-column">
<div class="value-cell">55</div>
<div class="value-cell">45</div>
<div class="value-cell">38</div>
</div>
</div>Thus, I would like something resembling this:
https://i.sstatic.net/S4O5H.png
however, my code generates this:
https://i.sstatic.net/uLaoY.png
Since I don't know the dimensions of the first-column because it is supposed to grow with the container...
How can I resolve this issue?