Javascript - コンテンツにフィットするようにdivを展開しますが、コンテナの外側には展開しません

Question

CSSでこれを行うことは可能ですか？次のHTMLを考える：

<div class="main-container"> 
    <div class="left"> 
     ... 
    </div> 
    <div class="right"> 
     <div class="top"> 
      ... 
     </div> 
     <div class="bottom"> 
      dynamic content 
     </div> 
    </div> 
</div> 

私はそれがトップとmain-containerの底部との間の空間をオーバーフローする場合bottomはスクロールしたいです。

これは、高さをbottomと指定しないとどうしてできますか？

可能であれば、他の要素に高さを指定しないことをお勧めします。今はありませんが、topも動的コンテンツを持つことができます。

上記のHTMLは必要に応じて変更できます。私が必要とするのは、左の列、右の列、および右の列の下の部分が、コンテキストがメインコンテナの空きスペースを超えている場合にスクロールすることです。

Answer 1

最終的には、内容がそれらの範囲を超えているかどうかを知るために、何らかの種類の制限（heightまたはmax-height）を指定する必要があります。

これらの寸法を設定すると、必要に応じてoverflow:auto;にスクロールバーが表示されます。これはあなたが探しているものである

Answer 2

希望：

<div class="main-container"> 
    <div class="left" style="float: left; width:33%"> 
     ... 
    </div> 
    <div class="right" style="float: right; width:66%"> 
     <div class="top" style="height: auto;"> 
      ... 
     </div> 
     <div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;"> 
      dynamic content 
     </div> 
    </div> 
</div>