Сделать так, чтобы текст заполнял только оставшееся пространство в ячейке таблицы ⇐ CSS

[Гость]

Preconditions: I am limited to old browsers (around Chrome 25), which do not support a lot of CSS features. Also, the table structure with 3 columns needs to remain, and the first column should not take more space, than it needs.
Goal: I have an info element, which specifies the overall width and a red box within the cell, which already takes up some space. Furthermore, I want the text element to fill the remaining space, without pushing the red box out of the boundaries. Note, that the parent width and the box width could be dynamic values, depending on the screen resolution. I tried to wrap the according cell in another flex box combined with "flex: 1 1 0" and many other things, and ChatGPT also had no answer.
Do you have a solution? Or is it not solvable with the requirements?

Код: Выделить всё

.info {
width: 600px; /* dynamic */
background: lightgray;
}

.container {
background: gray;
}

.table {
display: table;
}

.row {
display: table-row;
}

.row :first-child {
border-right: solid black 20px;
}

.cell {
display: table-cell;
}

.flex {
display: flex;
}

.box {
width: 300px; /* dynamic */
background: red;
}

.text {
white-space: nowrap; /* needs to fill the remaining space, without pushing the box out of its parent */
}

Код: Выделить всё

1.1
1.2
1.3


2.1


This is a text, too long to fit inside the container



2.3

EDIT: Each row can only consist of a single line, thus white-space: nowrap is required. That part of the text, that needs to be cut of, should be hidden with overlap: hidden.
Current Layout:

Expected Layout:




Источник: https://stackoverflow.com/questions/781 ... table-cell