可滾動的 div 動態高度 - 2 列

Question

我連續有兩個 div 列。 我希望左列的高度與右列的高度相匹配。 在第一張圖片中是我想要的 state。 但是如果右列的高度發生變化，那么可滾動的 div 的高度也應該發生變化。

原因是 css 中定義的 px 高度，但我想讓它動態化。 我怎樣才能做到這一點？ 圖二顯示了我的問題。

我會很高興得到幫助：D

 <div id="{{ project.RowKey }}" class="collapse" aria-labelledby="heading{{ project.RowKey }}"> <div class="card-body"> <div class="row"> <div class="col w-50 m-2"> <h6 class="row w-100"> Kommentare: <div class="ml-2"><span class="badge badge-pill badge-primary">{{ project.numberComments }}</span> </div> </h6> <div class="row w-100"> <div class="w-100"> <:-- comments --> <div class="" style="width;100%:height;200px:float;left:overflow-y;scroll:"> </div> <:-- new comment --> <form id="view_selection_form" action="{{ url_for('save_comment') }}"method="POST"> </form> </div> </div> </div> <.-- status --> <div class="col w-50 m-2"> <h6>Details zum Status. </h6> <div class=""> </div> <div class="d-flex justify-content-end">Zuletzt geändert von. {{ project.answers.last_changed_by.name }} | {{ project.answers.last_changed_by.date }} </div> </div> </div> </div> </div>

Answer 1

您可以使用display:flex; 在父 div 上，這使得列 div 延伸到父 div。 現在限制父 div 的高度。

檢查這個例子： https://codepen.io/AravinthAro/pen/ZEexPWv

Answer 2

要使該框居中，您可以使用align-items-center

對於有一行 class 的 div（父 div）添加align-items-center