scrollable div dynamic height - 2 columns

Question

i have two div columns in a row. i want the height of the left column to match that of the right column. In the first image is my desired state. But if the height of the right column changes, the height of the scrollable div should also be changed.

the reason is the height in px defined in the css, but i want to make that dynamical. how can i do that? Picture two shows my problem.

I would be glad about help :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

You can use display:flex; on the parent div and that makes the column divs to stretch till the parent div. Now restrict the height in parent div.

Check this example : https://codepen.io/AravinthAro/pen/ZEexPWv