Html div-won'内的内容；t在不指定高度的情况下填充可用空间

我有一个垂直分为两个窗格的页面。左侧的布局很好，但我在获取内容以填充右侧的可用空间时遇到问题。下面是说明这一点的图表

页眉和页脚（聚合元素）是固定高度，中间的内容区域在页面视图之间交换。为了获得填充空间的内容，我必须以vh单位指定主容器div高度。这在一定程度上是可行的，但我想使用百分比使其更灵活，但它似乎不起作用。关于如何更好地展示这一点，有什么想法吗？我的代码如下。谢谢

 <style>
  paper-card {
    width:100%;
  }

  .mainContainer{
    display: flex;
    height:100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .leftWindow {
    display:flex;
    height:100%;
    width:550px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .leftContainer{
    display: flex;
    height:100%;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .rightContainer{
    display: flex;
    height:100%;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .rightWindow {
    flex-grow: 1;
    height:100%;
    padding-right: 10px;
  }
  .notificationBlock{
    display:flex;
    flex:2 0 0;
    background-color: #009900;
  }
  .controlPanelBlock{
    height:60px;
    margin-bottom: 25px;
  }

  #divMainContainer {
    position: relative;
    display: block;
    width: 100%;
    height: 80vh;
  }

  .divModeImage {
    display:flex;
    flex-flow: row wrap;
    width: 30%;
    height: 16vw;
    flex-grow: 1;
    margin-top: 1vmin;
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 2vmin;
  }

</style>

<div class="mainContainer">
      <div class="leftWindow">
        <div class="leftContainer">
                other stuff.  Left side displays fine
          </div>
      </div>

      <div class="rightWindow">
        <div class="rightContainer">

              <notifications class="notificationBlock">

                <paper-card id="pcNotifcationBar" heading="&nbsp;">

                  <view-content notification={{notification}}>
                    <!-- Content changes here depending on page -->
                      <div id="divMainContainer">   <!-- class is using height: 80vh -->
                        <!-- 1st row of three images -->
                        <div class="divModeImage"> <!-- class is using height: 16vw -->
                          <iron-image id="imgBefore1" class="cabinModeImage"></iron-image>
                        </div>
                        <div class="divModeImage"> <!-- class is using height: 16vw -->
                          <iron-image id="imgBefore2" class="cabinModeImage"></iron-image>
                        </div>
                        <div class="divModeImage"> <!-- class is using height: 16vw -->
                          <iron-image id="imgBefore3" class="cabinModeImage"></iron-image>
                        </div>
                        <!-- 2nd row of three images -->
                        <div class="divModeImage"> <!-- class is using height: 16vw -->
                          <iron-image id="imgAfter1" class="cabinModeImage"></iron-image>
                        </div>
                        <div class="divModeImage"> <!-- class is using height: 16vw -->
                          <iron-image id="imgAfter2" class="cabinModeImage"></iron-image>
                        </div>
                        <div class="divModeImage"> <!-- class is using height: 16vw -->
                          <iron-image id="imgAfter3" class="cabinModeImage"></iron-image>
                        </div>
                      </div>
                    <!-- Content changes here depending on page -->
                  </view-content>

                </paper-card>

              </notifications>


              <footer class="controlPanelBlock" style="margin-top:10px;"></footer>

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

纸卡{
宽度：100%；
}
.主集装箱{
显示器：flex；
身高：100%；
弯曲方向：行；
柔性包装：nowrap；
调整内容：灵活启动；
}
.左窗{
显示器：flex；
身高：100%；
宽度：550px；
左侧填充：10px；
右边填充：10px；
}
.leftContainer{
显示器：flex；
身高：100%；
弯曲方向：立柱；
柔性包装：nowrap；
调整内容：灵活启动；
}
.rightContainer{
显示器：flex；
身高：100%；
弯曲方向：立柱；
柔性包装：nowrap；
调整内容：灵活启动；
}
.右窗{
柔性生长：1；
身高：100%；
右边填充：10px；
}
.通知块{
显示器：flex；
弹性：200；
背景色：#009900；
}
.控制面板块{
高度：60px；
边缘底部：25px；
}
#divmain容器{
位置：相对位置；
显示：块；
宽度：100%；
高度：80vh；
}
.divModeImage{
显示器：flex；
柔性流：行换行；
宽度：30%；
高度：16vw；
柔性生长：1；
利润上限：1V分钟；
左边距：1米；
右边距：1米；
边际下限：2vmin；
}
其他的东西。左侧显示良好

尝试将身体vh设置为100vh，其余高度将很容易设置。可能还需要为某些项目设置最小高度。请注意框大小和边距，以便内容不会超出显示器或其容器。我举了一个小例子，看看对你是否有效

/**重置所有CSS，这只是您需要的一小部分*/
身体{
保证金：0；
填充：0；
边界：0；
高度：100vh；/*将身体固定到显示器的高度*/
框大小：边框框；/*包括包含在元素总大小集中的填充和边框*/
}
/*您可以使用flex进行此练习*/
#主容器{
身高：100%；
边框：1px纯色灰色；
显示：-webkit flex；
显示器：flex；
-webkit柔性方向：列；
弯曲方向：列；/**使方向垂直*/
框大小：边框框；/*包括包含在元素总大小集中的填充和边框*/
}
#集装箱-1{
背景色：红色；
边框：1px纯色灰色；
高度：20px；
框大小：边框框；/*包括包含在元素总大小集中的填充和边框*/
}
#集装箱-2{
背景颜色：蓝色；
边框：1px纯色灰色；
flex grow:1；/**启用此元素的增长*/
框大小：边框框；/*包括包含在元素总大小集中的填充和边框*/
}
#集装箱-3{
背景颜色：绿色；
边框：1px纯色灰色；
高度：20px；
框大小：边框框；/*包括包含在元素总大小集中的填充和边框*/
}

您可能只需要将

高度：100%

添加到要使用百分比高度的元素的任何父元素。百分比高度是相对于容器的。如果我理解的话，您也可能需要或不需要添加

html，body{height:100%；}

。。你想让绿地完全填满吗

#divmaincainer{显示：块；高度：100%；位置：相对；宽度：100%；}

请发布问题的工作示例。灰色内容区域应完全填充。