Как сделать так, чтобы contenteditable учитывал начальный размер ячейки таблицы? ⇐ CSS

[Anonymous]

Моя таблица состоит из 3 ячеек: первые две содержат входные данные, а третья — мой контент. Каждая ячейка имеет ширину 33,333%. Когда я ввожу текст во входные данные и он переполняется, все работает нормально — текст просто скрыт, как и ожидалось для входных данных.
Однако, когда я печатаю в contenteditable , он растягивает ячейку вместо «прокрутки» текста, как это делает ввод.
[img]https://i.sstatic.net /CbLUjhir.png[/img]

Мой HTML:

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

Document

Мой CSS:

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

* {
box-sizing: border-box;
}

table {
width: 100%;
}

td {
width: 33.333333%;
}

input {
width: 100%;
height: 32px;
border: 1px solid #dedede;
}

.contendeditable {
padding-left: 10px;
height: 32px;
border: 1px solid red;
width: 100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
line-height: 32px;
}

Вот jsfiddle: https://jsfiddle.net/zvm0exdc/14/

Подробнее здесь: https://stackoverflow.com/questions/793 ... table-cell