为何display:flex会阻止contentEditable元素从末尾删除？如何修复？

问题场景 #

我有一个带contentEditable的段落元素：

<p contenteditable="true">
   hello-world
   <span contenteditable="false">LABEL 1</span>
   middle text 
   <span contenteditable="false">LABEL 2</span>
   final text
</p>

原本该元素可正常添加、删除内容，但给它添加如下CSS后：

p {
    display: flex;
}

在Vivaldi 5.3.2679.70稳定版（基于Chromium引擎）中，使用退格键从最后一个字符开始删除时，无法删除部分内容（比如LABEL 2无法被删除），移除display:flex则恢复正常。

原因分析 #

当父元素设置为display:flex后，Chromium引擎的contentEditable渲染逻辑会发生关键变化：

• 默认状态下，p是块级元素，内部文本和contenteditable=false的span会作为连续的文本节点/匿名盒子被编辑器引擎识别，退格时按文档流顺序依次处理内容。
• 改为flex布局后，父元素内的每个子内容（文本片段、span）都会被处理成独立的flex item，编辑器的光标定位和内容删除逻辑无法正确识别这些flex item之间的关联。尤其是contenteditable=false的元素，会被当作不可编辑的“独立块”，退格到该元素时，编辑器会判定这是一个不可编辑的独立节点，不会将其与前后文本合并处理，因此无法触发删除操作。

修复方案 #

以下是三种可行的修复方式，可根据实际需求选择：

方案1：用inline-flex替代flex #

如果需要保持类似flex的布局特性，将display:flex改为display:inline-flex，利用内联特性让编辑器仍按原文本流逻辑处理内容：

p {
    display: inline-flex;
}

方案2：将不可编辑元素包裹在可编辑内联容器中 #

如果必须使用display:flex，可以把contenteditable=false的span放在一个可编辑的内联元素（比如<span contenteditable="true">）里，让编辑器把整个区域当作可编辑的连续内容处理：

<p contenteditable="true">
   hello-world
   <span contenteditable="true"><span contenteditable="false">LABEL 1</span></span>
   middle text 
   <span contenteditable="true"><span contenteditable="false">LABEL 2</span></span>
   final text
</p>

这样即使是flex布局，编辑器也能正确识别不可编辑元素周围的可编辑区域，退格时可以正常删除包含不可编辑元素的容器。

方案3：手动处理退格事件（适合复杂场景） #

如果以上方案都不满足需求，可以通过JavaScript监听键盘退格事件，手动处理内容删除逻辑：

const editableP = document.querySelector('p[contenteditable="true"]');
editableP.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace') {
        const selection = window.getSelection();
        if (!selection.rangeCount) return;
        const range = selection.getRangeAt(0);
        
        // 检查光标是否紧邻不可编辑元素前方，手动删除对应节点
        const prevNode = range.startContainer.previousElementSibling;
        if (prevNode && prevNode.contentEditable === 'false') {
            e.preventDefault();
            prevNode.remove();
            // 调整光标到删除后的位置
            range.setStart(range.startContainer, range.startOffset);
            range.collapse(true);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }
});

该方案需要根据实际DOM结构调整逻辑，确保覆盖所有需要处理的场景。

内容的提问来源于stack exchange，提问作者Frappuccino