应用溢出时div无法扩展到全宽：自动

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>