Flexboxgrid - равная высота

Question

Я использую и ссылаюсь на flexboxgrid css.Как я могу иметь столбцы одинаковой высоты?Моя боковая панель id=dtside имеет цвет фона, и я хочу, чтобы он имел высоту, равную id=dtmain.До flexboxgrid я использовал display:table и display: table-cell, что хорошо работает, но мы перешли на flexbox.Я попытался объединить оба, результат был не тем, что я хотел.Я также нашел некоторые онлайн-решения, указывающие, что мне просто нужно добавить display:flex к родительскому div, и попытался добавить его как в class=box, так и в class=row, но это не сработало.

<div class="box box-container" id="dtmaincontents">
            <div class="row top-xs">
                <div class="col-xs-12 col-md-8" id="dtmain">
                    <div class="col-main" data-name="Main Page Content">
                        <!--CS: Start Page Field: Page Content Snippet-->
                        <!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                        <!--MS:<PageFieldRichHtmlField:RichHtmlField FieldName="f55c4d88-1f2e-4ad9-aaa8-819af4ee7ee8" runat="server">-->
                            <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
                        <!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
                        <!--CE: End Page Field: Page Content Snippet-->
                    </div>
                </div>
                <div class="col-xs-12 col-md-4" id="dtside">
                    <div class="col-side" data-name="Side Page Content">
                        <!--CS: Start Page Field: Side Content Snippet-->
                        <!--SPM:<%@Register Tagprefix="PageFieldRichHtmlField" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
                        <!--MS:<PageFieldRichHtmlField:RichHtmlField FieldName="995e9a86-eb77-4305-9cbe-6ea7c7e21c43" runat="server">-->
                            <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
                        <!--ME:</PageFieldRichHtmlField:RichHtmlField>-->
                        <!--CE: End Page Field: Side Content Snippet-->
                    </div>
                </div>
            </div>
        </div>

Я попытался добавить display: flex в #dtmaincontents, который работает, но если содержимое dtmain не использует всю ширину, боковая панель смещается влево.