Первая ссылка - модель flexbox 2009:

http://jsfiddle.net/vLKBV/

<div style="display:-webkit-box;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;background:#0f0;-webkit-box-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

и второй - пересмотренная версия 2011 - 2012 гг .:

http://jsfiddle.net/MNRgT/1/

<div style="display:-webkit-flex;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;background:#0f0;-webkit-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

Если вы измените размер результата по вертикали, вы увидите, что «HELLO» исчезает в новой гибкой модели, и если вы прокрутите вниз, это даст вам нижний пробел. С другой стороны, старая гибкая модель ведет себя правильно.

Есть ли способ обойти это в новейшей версии Chrome v26.0.1410.65?