Select multiline text without overflow width

The top image shows an unwanted red highlight from the yellow area when you select the cross lines. I want to highlight inside the yellow part like below:

HTML:

<div id="parent">
    <div id="child">
        This is some content... This is a long lonnnnnnng content.
    </div>
</div>

      

        
        
        
      

    

CSS

#parent {
    width: 200px;
    background-color: #666;
}

#child {
    padding: 50px;
    background-color: #ff0;
}

::selection {
    background-color: #f00;
}

      

        
        
        
      

    

Do you know how to achieve this?

Run the code here: http://jsfiddle.net/3AESf/