margin-left для полосы прокрутки в Chrome

Имеется полоса прокрутки:
#parent { height: 200px; width: 300px; overflow-y: auto; } #child { height: 500px; width: 100%; background: teal; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f6f5f3; } ::-webkit-scrollbar-thumb { background: #c1c1c1; }

Хочу сделать, чтобы между полосой прокрутки и контентом (блок #child) было расстояние в 2px. По сути хочу написать ::-webkit-scrollbar { margin-left: 2px; }. Так не работает. Пробовал добавить padding-right: 2px к элементу #parent, но тогда если полосы прокрутки нет (то есть в блоке #child мало содержимого (в примере высота #child фиксирована, но в реальном проекте зависит от содержимого)), то будут лишние 2px пустого места. Как добавить расстояние 2px между полосой прокрутки и блоком #child?
Обновление:
У блока #parent имеется свойство overflow-y: auto;. То есть появится полоса прокрутки или нет зависит от высоты блока #child. В примере высота #child фиксирована, однако в реальном проекте зависит от содержимого (там динамически подгружаемый текст, много текста => появится полоса прокрутки, мало текста => не появится). Это всё к тому, что если полосы прокрутки нет, то решение не должно влиять на отображение. То есть хочется добавить 2px свободного места между контентом и полосой прокрутки, если полоса прокрутки есть, и ничего не добавлять, если её нет.

Ответ

#parent { height: 200px; width: 300px; overflow-y: auto; } #child { height: 500px; background: teal; } ::-webkit-scrollbar { width: 10px; // 8px (ширина полосы прокрутки) + 2px (расстояние между полосой прокрутки и контентом) } ::-webkit-scrollbar-track { background: #f6f5f3; } ::-webkit-scrollbar-thumb { background: #c1c1c1; border-left: solid 2px #fff; }