Absolute positioned button in a flex layout with hidden overflow (with scolling)

Question

I'm trying to realize a Flex-layout with hidden scrollbars which I have realized. But now I also need a absolute/fixed button and I have failed to get it to work.

Without hidden scrollbars it works:

But when I hide the scrollbars the button sticks to the top which is undesirable.

<style>
    .root {
        background-color: #fff;
        display: flex;
        height:100%;
    }

    .pane {
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        overflow-x: hidden;
        overflow-y: visible;
        -ms-overflow-style: none;
        height: 100%;
        width: 400px;
    }

    .pane::-webkit-scrollbar {
        display: none
    }

    div.pos {
        position: absolute;
        right: 0px;
        width: 32px;
        height: 32px;
        background-color: #01689B;
        color: #fff;
    }
</style>
<div class="root">
    <div class="pane">
        <div class="pos">x</div>
        <div style="height: 2000px">
            Lorem ipsum dolor sit amet, etc etc
            <br/> Lorem ipsum dolor sit amet, etc etc
            <br/> Lorem ipsum dolor sit amet, etc etc
            <br/> Lorem ipsum dolor sit amet, etc etc
            <br/> The button should stick to the right of the text and scroll width the text;
        </div>
    </div>
</div>

Your sample code doesn't show that, and the scrollbar is still visible. Provide a [mcve] that reproduce the issue. — Asons, Jul 26 '18 at 11:05
@LGSon it works in Chrome. Will check why it fails in IE and edit the question. Don't us the "Run code snippet" though it only works when running local. — Ralf de Kleine, Jul 26 '18 at 11:08
Am using Chrome here, with the snippet, ...and there is no reason it shouldn't be reproducible in the snippet as well, if it works locally. — Asons, Jul 26 '18 at 11:11
Reproduced it in my answer (setting height to html/body/.pane). — Asons, Jul 26 '18 at 11:16

score 1 · Accepted Answer · answered Jul 26 '18 at 11:15

The problem is simple, the absolute positioned element doesn't relate to the scrolling element.

Give it position: relative and it will.

Stack snippet

<style>
        html, body {
            overflow: hidden;
            height: 100%;
        }
        .root {
            background-color: #fff;
            display: flex;
            height: 100%;
        }
    
        .pane {
            position: relative;           /*  added  */
            flex-grow: 1;
            flex-shrink: 1;
            display: flex;
            overflow-x: hidden;
            overflow-y: visible;
            -ms-overflow-style: none;
            height: 100%;
        }
    
        .pane::-webkit-scrollbar {
            display: none
        }
    
        div.pos {
            position: absolute;
            right: 0px;
            width: 32px;
            height: 32px;
            background-color: #01689B;
            color: #fff;
        }
    </style>
    <div class="root">
        <div class="pane">
            <div class="pos">x</div>
            <div style="height: 2000px">
                Lorem ipsum dolor sit amet, etc etc
            </div>
        </div>
    </div>

@RalfdeKleine Great...I also closed this post as a dupe, as it actually is, and hope you agree. It benefit upcoming Flexbox based questions that could be similar, now being linked. — Asons, Jul 26 '18 at 11:23

Absolute positioned button in a flex layout with hidden overflow (with scolling)

1 Answers1