Html 包含最大高度的div，包含的div使用css不会溢出

我有下面的html

使用“最大高度”设置分区B的高度。它包含两个高度可变的分区B1和B2

当B1+B2的高度小于B的高度时，我希望B1和B2具有其正常高度（高度ob B小于其最大高度）。这部分工作正常

当B1+B2的高度高于B的高度时，我不希望B2溢出div B（我希望B2的底部与B的底部匹配，B2内的内容溢出B2）我如何才能做到这一点？

请看这个以便更好地理解

<div id="container">
<div id="A">
    <div id="B">
        <div id="B1">D1</div>
        <div id="B2">
            D2 - long content
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line                
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line               
            <br/>line
            <br/>line
            <br/>line
            <br/>line
            <br/>line
        </div>
    </div>
</div>

D1
D2-长内容

行

行

行

行

行

行

行

行

行

行

行

行

行

行

行

行

行

行

行

行

---

谢谢

尝试将b2的css更改为：

#B2 {
    position:absolute;
    background: red;
    opacity: 0.5;
    max-height:inherit;
    overflow:auto;
    width:100%;
}

---

我知道这并不完美，因为b1+b2的最大可能高度将为b+b1，但在您的情况下，这可能是可以接受的

这里有问题吗？Ryan，我编辑了这个问题来澄清它。我在这里尝试了你的代码。它似乎不起作用（B2保持它的全高，就像没有最大高度一样）。我将尝试复制它，并将在本周向您发送链接。您可能忘记了位置：绝对：）请看作品的魅力。谢谢