My goal is to achieve a layout where the parent container's width can vary. The first child element (red) should expand based on its content until it reaches the end of the parent, at which point text-overflow: ellipses should be applied. The second child element (green) should always stay on the right of the first child.
The first image shows what happens when the text doesn't fill the entire parent width, while the second image demonstrates the desired effect when the first child does take up the full width and overflow occurs.
https://i.sstatic.net/5DRpX.png
No matter how I use inline-block or flex on the child elements, I encounter issues like wrapping, missing ellipses for overflow, or exceeding 100% width of the parent. There should not be a horizontal scrollbar and the table boundary should be limited to 100% window width.
The challenge lies in keeping the green child fixed to the right while allowing the red box to expand until it overflows, triggering ellipses. Here's an example highlighting the struggle (notice how the green child disappears due to overflow:hidden):
table {
width: 100%;
}
th {
border: gray 1px dotted;
text-align: left;
height: 1rem;
overflow: hidden;
text-overflow: ellipses;
white-space: nowrap;
}
div {
border: red 3px dashed;
min-width: 3rem;
overflow: hidden;
text-overflow: ellipses;
white-space: nowrap;
background-color: rgba(red, .2);
}
div:nth-child(1) {
display: inline-block;
overflow: hidden;
text-overflow: ellipses;
white-space: nowrap;
}
div:nth-child(2) {
border: green 3px dashed;
background-color: rgba(green, .2);
display: inline-block;
}<table>
<thead>
<tr>
<th>
<div>
Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing
</div>
<div>
Blah
</div>
</th>
<th style="width: 300px">
<div>
Another COLUMN
</div>
</th>
</tr>
</thead>
</table>If anyone has insight on how to achieve this within a table cell with two child divs, please share as I couldn't find a specific solution to this scenario.