缩小时边框会导致边框和内容之间出现间隙

Question

我试图有一个带有边框的外部 div，并在内部包含可以具有动态高度的内容的 div。问题是，当缩小时，顶部会出现一些随机空格（在 Chrome 浏览器上为 67%）。

如何解决这个问题？（背景颜色必须保持白色，不能使用绝对位置）js fiddle： 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 来充当边框，并且这不会因为不同的缩小值而出错