Граница приводит к разрыву между границей и содержимым при уменьшении

Question

Я пытаюсь создать внешний div с рамкой и внутри div с содержимым, которое может иметь динамическую высоту c. Проблема заключается в том, что при уменьшении вверху появляются случайные пробелы (в браузере chrome на 67%).

Как это можно исправить? (цвет фона должен оставаться белым, абсолютное положение не может быть использовано) js скрипка: http://jsfiddle.net/Arminaspam/djpervLh/13/

    border-radius: 13px;
    box-shadow: -20px 20px #f6f5f7;
    margin: 20px auto;
    padding: 0;
    text-align: left;
    width: 266px;">
    <div style="background-color: white;
    border-radius: 13px;
    border: 2px solid #0048c1;">
        <div style="
    border-radius: 10px;
    color: #fff;
    padding: 15px;
    background-color: #0048c1;">
            <div>
                Text that might be longer and take a dynamic amount of height in it
            </div>
        </div>
    </div>
</div>```

Answer 1

chrome странным образом рендерит бродеров, чтобы исправить это, я использовал box-shadow: 0px 0px 0px 2px # 3d3691, -20px 20px 0 0 # f6f5f7 в качестве границы, и это не выдает ошибку с различным уменьшением масштаба значения