Question

我已经编写了一些代码来比较两个文本文件并显示为并排的可滚动div，并突出显示不平等。一切都很棒，除非启用了overflow-x，否则我无法突出显示扩展到溢出区域。我在这里采取了一些方法来解决这个问题，无论是我自己还是我在这里找到的解决方案。没有工作。

内联块

#leftFile pre, #rightFile pre {
    text-align: left;
    margin: 0;
    padding: 0;
    min-width: 100%;
    display: inline-block;
}

浮动：

#leftFile pre, #rightFile pre {
    text-align: left;
    padding: 0;
    margin: 0;
    min-width: 100%
    float: left;
}

表格行：

#leftFile pre, #rightFile pre {
    text-align: left;
    padding: 0;
    display: table-row;
}

这些都不起作用。前两个元素只扩展<pre>元素，文本扩展为溢出，我希望所有元素都扩展到最长的元素。

第三个是接近的。但是删除了空白行，即使我将min-width指定为100％，第二列也不会占用容器的100％。

包含所有三种情景的Plnkr：

Answer 1

在<pre> </pre>标记之间没有空格字符的情况下，添加此CSS规则时，第三个解决方案可行。

#leftFile3 pre:empty:after, #rightFile3 pre:empty:after {
content: '.';
visibility: hidden;
}

如果这些空格是强制性的，请使用

#leftFile3 pre:after, #rightFile3 pre:after {
content: '.';
visibility: hidden;
}