更改内容高度后，div不会采用全高

Question

我有这个 VueJS 组件：

<pages inline-template>
            <div>
              <div class="row" style="" v-if="!showMessage">
                <aside class="col-lg-3" id="leftmenu" <%if (datas.doc[0].datas.sidebarcolor1.length > 0) { %> style="padding-top: 8px;padding-left:20px;background: <%=datas.doc[0].datas.sidebarcolor1%>;<%if (datas.doc[0].datas.sidebartextcolor.length > 0) { %>
                                                                                                                     color : <%=datas.doc[0].datas.sidebartextcolor%> !important;
                                                                                                                     <% } %>"
                       <% } else { %>style="padding-top: 8px;background: #e3e3e3;padding-left:20px; <%if (datas.doc[0].datas.sidebartextcolor.length > 0) { %>
                                            color : <%=datas.doc[0].datas.sidebartextcolor%> !important;
                                            <% } %>" <% } %>>
                  <h3 style="<%if (datas.doc[0].datas.sidebartextcolor.length > 0) { %>
                             color : <%=datas.doc[0].datas.sidebartextcolor%> !important;
                             <% } %>"><%-datas.doc[0].datas.title%></h3>
                  <div id="treeparent">
                    <div id="tree"></div>
                  </div>
                </aside>
                <hr class="brace">
                <div class="col-lg-7 pt-2" style="min-height: 100vh;">
                  <div v-if="showContent"
                       id="mdrender"
                       v-html="$options.filters.markdown(markdown)"
                       ></div>

                  <div style="height: calc(100vh - 161px);display: flex;align-items: center;justify-items: center;justify-content: center;" v-show="showMessage">
                    <h1>No content for this page</h1>
                  </div>
                </div>
                <div class="col-lg-2" <%if (datas.doc[0].datas.rightmenubg1.length > 0) { %> style="background: <%=datas.doc[0].datas.rightmenubg1%>;"<%}%>style="">
                  <div id="tocOut" <%if (datas.doc[0].datas.rightmenu1.length > 0) { %> style="border: solid <%=datas.doc[0].datas.rightmenu1%>;
                                                                                               border-width: 0 0 0 .25rem;
                                                                                               -o-border-image: linear-gradient(<%=datas.doc[0].datas.rightmenu1%>,<%=datas.doc[0].datas.rightmenu2%>) 0 0 0 100%;
                                                                                               border-image: -webkit-gradient(linear,left top,left bottom,from(<%=datas.doc[0].datas.rightmenu1%>),to(<%=datas.doc[0].datas.rightmenu2%>)) 0 0 0 100%;
                                                                                               border-image: linear-gradient(<%=datas.doc[0].datas.rightmenu1%>,<%=datas.doc[0].datas.rightmenu2%>) 0 0 0 100%;" <% } else { %> style="border: solid #ea2328;
    border-width: 0 0 0 .25rem;
    -o-border-image: linear-gradient(#b36cdb,#eb4971) 0 0 0 100%;
    border-image: -webkit-gradient(linear,left top,left bottom,from(#b36cdb),to(#eb4971)) 0 0 0 100%;
    border-image: linear-gradient(#b36cdb,#eb4971) 0 0 0 100%;" <% } %>></div>
                </div>
              </div>
            </div>
          </pages>

问题是，当我单击内容比上一个内容长的menu项目（ <div id="tree"></div> ）时，leftmenu不会它的全部高度保持在先前内容的高度上。

这是屏幕截图：