::select伪元素在填充空间中被忽略，选择超出范围......？

Question

我正在尝试应用 non-standard, but pretty widely supported CSS 伪选择器来设置浏览器中选择的文本颜色。起初一切似乎都很好，然后冰鼬来了。

假设你有这个 HTML：

<div class="outside">
    So what's wrong with this picture?
    <div class="fancy">
        Custom selection color lost on right
        <div>But only on direct children</div>
        <div>Divs underneath are ok (?)</div>
    </div>
    ...aaand selection bleeds to outside div. :-/
</div>

使用这个 CSS：

.outside {
    margin: 32px;
}

.fancy {
    color: white;
    background: green;
}

.fancy::selection, .fancy div::selection {
   background: #800080 !important;
}

在 Chrome/Safari 中你得到的是这个：

（Here's a jsFiddle，当然你必须做出选择才能获得效果）

如果有人想接受挑战，向我解释其中的逻辑，请成为我的客人。但是如果你不能解释它，可以告诉我如何让它看起来像：

那对于我正在做的事情来说已经足够了！

---

更新：将@ralph.m 关于该区域外出血的回答标记为已接受。虽然它没有解决关于自定义选择颜色丢失的第二个问题。每当您选择一个块级元素时，这似乎就会发生，该元素包含块级元素和非块级元素作为子元素。除了将您的文档结构更改为不具有该模式（和/或不在乎）

之外，可能没有什么可做的

Answer 1

使用overflow: hidden; 通常对我有用。例如

.fancy {
    overflow:hidden;
}