Создание элементов имеет ту же ширину, что и самый широкий брат, который переполняется ⇐ Html

[Anonymous]

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

td {
max-width: 600px;
}

pre {
margin: 0;
}

pre,
.grey {
line-height: 100%;
}

.container {
display: flex;
flex-direction: column;
overflow-x: scroll;
}

.container>* {
min-width: 100%;
}

.container pre {
width: max-content;
overflow-x: visible;
padding: 0;
display: flex;
flex-direction: column;
background: none;
}

.container code {
display: inline-block;
min-width: 100%;
background-color: #eee;
}

.container code,
.grey {
padding: 0.25em 1em;
}

.grey {
min-height: 2em;
padding: 0.25em 1em;
background: grey;
font-family: monospace;
}

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

some stuff here

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

a very very very very very very very very very very very very very very very very very very very long line

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

shorter

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

longer but not as long as the other line.....................................

У меня есть несколько ячеек таблицы td, которые имеют фиксированную ширину, и вы сможете прокручивать их, чтобы увидеть полное содержимое внутри td. (Я не уверен, имеет ли большое значение тот факт, что он находится в td, но я все равно включил его на всякий случай.) Однако я хочу, чтобы фон всех элементов внутри td > div.container расширялся до конца вправо, чтобы соответствовать ширине самого длинного элемента, поэтому в приведенном выше примере темно-серый div и «более короткий» pre должны расширяться до самого конца, чтобы соответствовать более длинному элементу. pre.
Как это сделать с помощью CSS?
Как видно выше во фрагменте кода, установка минимальной ширины: 100% не работает.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -overflows