Использовать полную ширину, исключая полосу прокрутки с переполнением, с «position: absolute»

Я хотел бы иметь небольшой красный блок div полной ширины в фиксированной верхней позиции внутри другого блока div с переполнением : scroll. Я надеюсь, что jsFiddle дает понять: http://jsfiddle.net/mCYLm/2/.

Проблема в том, что красный элемент div перекрывает полосу прокрутки. Я предполагаю, что right: 0означает правую часть div.wrapper; он не вычитает полосу прокрутки div.main. Когда я перемещаю overflow: scrollв div.wrapper, красный баннер имеет правильный размер ( fiddle). Однако он больше не находится в фиксированном положении (прокрутка вниз приводит к прокрутке баннера вверх).

Как я могу одновременно достичь следующих двух целей?

• Красное знамя находится в фиксированном положении, как на этой скрипке.
• Красное знамя имеет полную ширину, за исключением полосы прокрутки, как в этой скрипке.

Я хочу, чтобы это работало в Google Chrome.

HTML:

    

    

        
foo
        
foo
        
foo
        
foo
    
​

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;
}