Overlaying divs in flexbox layout

Question

I created a website layout using flexbox. Here's my previous question on how to do so: HTML 100% Height with multiple inline scrolling divs

Now I would like to modify the right column (container H): Instead of just one full height scrollable DIV as it is now, I need three layers one above each other, same size and position. Container H should remain the one on the bottom, still taking up all the height and be scrollable. The one in the middle (container I) should fill the page but not be scrollable. The one on top (container J) should be as high as needed, but not exceed the page, and be scrollable if higher.

Any idea on how to do so? I tried making the container relative and the divs absolute, but it totally breaks my layout.

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/

Since it's quite hard to understand, I have included two picture. The first shows how it is now:

And this is what it should look like:

It would be helpful to include a drawing of what you're looking for. I've read your question twice and it's hard to understand. — Andy Hoffman, May 17 '16 at 07:12
You are right, it's really hard to understand. I have added some images. — Davide De Santis, May 17 '16 at 07:56

score 2 · Answer 1 · answered May 17 '16 at 11:16

2

I guess you are trying to do this:

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

answered May 17 '16 at 11:16

alexndreazevedo

381
1
3
14

Not exactly. It was hard to show in the image, but I and J have the same position as H, they are just on top of it (z-index). I tried using position: fixed (or absolute), but then it does not comply with the flexbox container. – Davide De Santis May 17 '16 at 12:31
You may adjust the measure of each calc() values. https://jsfiddle.net/alexndreazevedo/nsyem048 – alexndreazevedo May 17 '16 at 12:41
Looks better now. Is there a way to do that without using calc? I used flexbox to have dynamic height and now with this, I would have to add fixed heights again. – Davide De Santis May 17 '16 at 13:12
Using ```calc()``` you can made it easy, but you need to consider that fixed elements are related to viewport. Depending of case, you can use inner elements with ```position:absolute``` inside elements with ```position:relative```. – alexndreazevedo May 17 '16 at 13:15
Unfortunately that's not what I'm trying to achieve. I just want to have 3 layers like H instead of just one. All above each other (via z-index) and all of them adhering to the flexbox. – Davide De Santis May 18 '16 at 06:23

Overlaying divs in flexbox layout

1 Answers1