Me gustaría tener un pequeño div rojo con ancho completo en una posición superior fija, dentro de otro div que tieneoverflow: scroll. Espero que el jsFiddle lo aclare:http://jsfiddle.net/mCYLm/2/.

El problema es que el div rojo está superpuesto a la barra de desplazamiento. supongoright: 0 significa el lado derecho dediv.wrapper; no resta la barra de desplazamiento dediv.main. Cuando muevo eloverflow: scroll dentrodiv.wrapper, entonces la bandera roja tiene el tamaño correcto (violín). Sin embargo, ya no está en una posición fija (el desplazamiento hacia abajo hace que el banner se desplace hacia arriba).

¿Cómo puedo lograr las siguientes dos cosas juntas?

La bandera roja está en la posición fija como eneste violín.El banner rojo tiene ancho completo excepto la barra de desplazamiento como eneste violín.

Me gustaría que esto funcione en Google Chrome.

HTML:

<div class="wrapper">
    <div class="red-banner"></div>
    <div class="main">
        <div class="item">foo</div>
        <div class="item">foo</div>
        <div class="item">foo</div>
        <div class="item">foo</div>
    </div>
</div>​

CSS:

div.wrapper {
    position: relative;
}

div.main {
    height: 200px;
    overflow-y: scroll;
}

div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}

div.red-banner {
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 20px;
}