溢出应该尊重最大高度吗？

Question

我有两个这样的div：

<div id="a">
    <div id="b">
        b b b b b b b b bb
        b b b b b b b b b b b
        b b b b b b b b bb b 
        b b b b b b b b b b
    </div>
</div>

* { box-sizing: border-box; }
#a {
    width: 40px;
    max-height: 50vh;
    border: 1px solid green;
}
#b {
    width:100%;
    max-height: 100%;
    overflow-y: scroll;
    border: 1px solid red;
}

正如你在fiddle中看到的那样，内部div溢出了外部。这是因为外部div上的max-height。如果我将其替换为height，则会按预期工作。

但我想使用max-height，因为我希望根据内容将高度设置为动态。

我希望内部div能够滚动而不会溢出外部div - 当外部div到达max-height时。

有没有办法实现这个目标？

更新：我想我找到了办法。要求总是有帮助的。在这种情况下，将50vh移至内部div会解决我的问题，请参阅new fiddle。

但这不是一般解决方案。