在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/