Flex布局中的绝对定位按钮，具有隐藏的溢出（带有污点）

Question

我正在尝试使用我意识到的隐藏滚动条来实现Flex-layout。但是现在我还需要一个绝对/固定按钮，但是我无法使其正常工作。

没有隐藏的滚动条，它可以工作：

但是当我隐藏滚动条时，按钮会粘在顶部，这是不希望的。

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

Answer 1

问题很简单，绝对定位元素与滚动元素无关。

将其position: relative给予它。

堆栈片段

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