div не расширяется до полной ширины при применении переполнения: auto

Question

[введите описание изображения здесь] [1] в настоящее время я столкнулся с одной проблемой.Я сгенерировал таблицу, используя div с исправлением заголовка и полосу прокрутки в разделе строки div.но проблема в том, что оба div не занимают все 50% ширины 50%.

Я пробовал следующий код. но не работает.

.brd2 {
        height: auto;
        max-height: 100px;
        overflow: auto;
        position: absolute;
        width: 100%;
    }

    .back-clr {
        background-color: red;

    }
    HTML PART
     <div class="container">
    <div class="row">
        <div class="col-md-8">
            <div style="display: table;width:100%">
                <div style="display: table-row">
                    <div style="width:50%; display: table-cell;">
                        Test
                    </div>
                    <div style="width:50%; display: table-cell;">
                        test
                    </div>
                </div>
                <div class="brd2" style="display: table-row;">
                    <div class="content" style="width:50%; display: table-cell;">
                        <p>sdfds
                            fdsf</p>
                        <p>dsfds
                            fds</p>
                        <p> fds
                            fsf
                            dsf</p>
                        <p>sdfds
                            fdsf</p>
                        <p>dsfds
                            fds</p>
                        <p> fds
                            fsf
                            dsf</p>
                    </div>

                    <div class="content back-clr" style="width:50%;display: table-cell;">
                        this is second div
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>