html - 在 Flexbox 布局中覆盖 div

Question

我使用 Flexbox 创建了一个网站布局。这是我之前关于如何执行此操作的问题: HTML 100% Height with multiple inline scrolling divs

现在我想修改右列(容器H): 我需要三层，一层一层，大小和位置相同，而不是像现在这样只有一个全高可滚动 DIV。 容器H应该保持在底部，仍然占据所有高度并且可以滚动。 中间的容器(容器I)应该填满页面，但不可滚动。 顶部的容器(容器 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>

fiddle : 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/