, содержащий div с max-height, содержащий содержащий div, который не переполняется с помощью css

Question

У меня есть следующий html.

Высота div B устанавливается с использованием максимальной высоты. Он содержит 2 divs, B1 и B2, которые имеют переменную высоту.

Если высота B1 + B2 меньше высоты B, я хочу, чтобы B1 и B2 имели нормальную высоту (а высота ob B была меньше, чем максимальная высота). Эта часть работает.

Если высота B1 + B2 выше, чем у B, я не хочу, чтобы B2 переполнял div B (я хочу, чтобы нижняя часть B2 соответствовала нижней части B, а содержимое внутри B2 - переполнение В2). Как я могу это достичь?

Пожалуйста, ознакомьтесь с этим fiddle для лучшего понимания.

<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> 

Благодаря

Answer 1

Попробуйте изменить CSS от b2 до:

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

Я знаю, что это не идеально, потому что максимальная возможная высота b1 + b2 будет Ь + b1 , но, возможно, это может быть приемлемым в вашем случае?