::select pseudo-element ignored in fill space, selection going out of bounds...?

Question

I'm trying to apply the non-standard, but pretty widely supported CSS pseudo-selector for setting the text color of selections in the browser. All seemed to be fine at first, and then the ice weasels came.

Let's say you have this 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>

With this CSS:

.outside {
    margin: 32px;
}

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

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

What you get back is this, in Chrome/Safari:

(Here's a jsFiddle, and of course you'll have to make the selection to get the effect)

If anyone wants to pick up the challenge of explaining the logic of that to me, be my guest. But if you can't explain it and can just tell me how to make it look like:

Then that's more than good enough for what I'm doing!

---

UPDATE: Marking @ralph.m's answer as accepted regarding bleeding outside the area. Though it doesn't address that second issue about loss of the custom selection color. That just seems to happen whenever you select across a block-level element, which contains both block-level elements and non-block-level elements as children. There may not be anything to do about it besides change your document structure to not have that pattern (and/or not care)

Answer 1

Using overflow: hidden; normally works for me. E.g.

.fancy {
    overflow:hidden;
}