如果没有指定高度

Question

我有一个垂直分隔成两个窗格的页面。左侧布局很好，但我无法获取内容以填充右侧的可用空间。下面是一个说明这一点的图表。

页眉和页脚（聚合物元素）是固定高度，其间的内容区域在页面视图之间交换。为了使内容填充空间，我必须以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>