在flexbox布局中叠加div div

Question

我使用flexbox创建了一个网站布局。这里是我以前对如何做到这一点的问题： HTML 100% Height with multiple inline scrolling divs

现在我想修改的右列（容器^h）： 而是因为它现在只是一个全高滚动DIV的，我需要三层一个在另一个之上，相同的大小和位置。 集装箱H应保持底部的一个，仍然占据所有的高度和可滚动。 中间的一个（容器我）应填充页面，但不能滚动。 上面的那个（容器J）应该尽可能高，但不能超过页面，如果更高，可以滚动。

有关如何这样做的任何想法？ 我试图使容器相对和div绝对，但它完全打破了我的布局。

CSS：

html, body { 
     height: 100%; 
     width: 100%; 
    } 

    body { 
     padding: 0; 
     margin: 0; 
    } 

    main { 
     display: flex; 
     flex-direction: column; 
     flex-wrap: nowrap; 
     align-content: stretch; 
     align-items: stretch; 
     width: 1200px; 
     height: 100%; 
     margin: 0 auto; 
    } 

    header { 
     display: flex; 
     flex-wrap: nowrap; 
     min-height: 84px; 
     height: 175px; 
     max-height: 175px; 
     flex: 1 0 auto; 
     position: relative; 
    } 

     header #headerWrapper { 
      display: flex; 
      flex-direction: column; 
      flex: 1 0 auto; 
      background-color: magenta; 
      overflow: hidden; 
     } 

      header #headerWrapper nav { 
       min-height: 40px; 
       height: 40px; 
       max-height: 40px; 
       background-color: green; 
       overflow: hidden; 
      } 

      header #headerWrapper #toggleFilter { 
       display: none; 
       position: absolute; 
       right: 195px; 
       bottom: 0px; 
       width: 16px; 
       height: 38px; 
       background-color: red; 
      } 

      header #headerWrapper #filterContainer { 
       min-height: 44px; 
       height: 135px; 
       max-height: 135px; 
       background-color: gray; 
       flex: 1 0 auto; 
       overflow: hidden; 
      } 

     header #clipboardContainer { 
      width: 175px; 
      height: 175px; 
      background-color: blue; 
      overflow: hidden; 
      -webkit-transition: height 0.2s; 
      -moz-transition: height 0.2s; 
      -ms-transition: height 0.2s; 
      -o-transition: height 0.2s; 
      transition: height 0.2s; 
     } 

    header.filter-collapse #headerWrapper #toggleFilter { 
      display: inline-block; 
     } 

     header.filter-compact { 
      height: 84px; 
      max-height: 84px; 
     } 

      header.filter-compact #headerWrapper #filterContainer { 
       height: 44px; 
       max-height: 44px; 
      } 

      header.filter-compact #clipboardContainer { 
       height: 84px; 
      } 

       header.filter-compact #clipboardContainer:hover { 
        height: 175px; 
        position: absolute; 
        right: 0px; 
       } 

    #contentWrapper { 
     display: flex; 
     flex: 1 1 auto; 
     align-content: stretch; 
     align-items: stretch; 
     overflow: auto; 
    } 

     #contentWrapper #contentLeftWrapper, #contentWrapper #contentRightWrapper { 
      flex: 1 0 50%; 
      display: flex; 
      flex-direction: column; 
     } 

     #contentWrapper #contentLeftWrapper #contentLeftContainer, #contentWrapper #contentRightWrapper #contentRightContainer { 
      flex: 1 1 auto; 
     } 

      #contentWrapper #contentLeftWrapper { 
       background-color: red; 
      } 

      #contentWrapper #contentRightWrapper { 
       background-color: aqua; 
      } 

      #contentWrapper #headerLeftContainer, #contentWrapper #headerRightContainer, #contentWrapper #footerLeftContainer { 
       min-height: 33px; 
       height: 33px; 
       max-height: 33px; 
      } 

      #contentWrapper #contentLeftWrapper #contentLeftContainer, #contentWrapper #contentRightWrapper #contentRightContainer { 
       overflow: auto; 
      } 

HTML：

<main> 
    <div style="background: red;"> 
     A 
    </div> 

    <header class="filter-compact"> 
     <div id="headerWrapper"> 
      <nav>B</nav> 
      <span id="toggleFilter"></span> 
      <div id="filterContainer"> 
       C 
      </div> 
     </div> 
     <div id="clipboardContainer">D</div> 
    </header> 

    <div id="contentWrapper"> 
     <div id="contentLeftWrapper"> 
      <div id="headerLeftContainer">E</div> 
      <div id="contentLeftContainer" style="background-color: yellow;"> 
       F    </div> 
      <div id="footerLeftContainer">G</div> 
     </div> 
     <div id="contentRightWrapper"> 
      <div id="headerRightContainer">H</div> 
      <div id="contentRightContainer" style="background-color: yellow;"> 
       H    </div> 
     </div> 
    </div> 
</main> 

小提琴： https://jsfiddle.net/davidedesantis/mqmgad4w/

因为它会很难理解，我已经包含了两倍画面。第一条显示它的现在：

，这是它应该是什么样子：

Answer 1

我猜你正在尝试做这个：

#contentWrapper #contentRightWrapper #contentRightContainer .popupI { 
    position: fixed; 
    margin: 10px 0 0 10px; 
    width: calc(50% - 20px); 
    height: calc(100% - 154px); 
    background: #05DD00; 
    box-shadow: 0 2px 5px 1px rgba(0,0,0,0.4); 
} 

#contentWrapper #contentRightWrapper #contentRightContainer .popupJ { 
    position: fixed; 
    background: #886CFF; 
    margin-top: 10px; 
    margin-left: 10px; 
    width: calc(50% - 20px); 
    box-shadow: 0 2px 5px 1px rgba(0,0,0,0.4); 
    max-height: calc(100% - 154px); 
    overflow-y: auto; 
    word-wrap: break-word; 
} 

https://jsfiddle.net/alexndreazevedo/obeLzvdn/