位置:在flexbox子项中粘滞不起作用

我有一个带5个直系子女的Flexbox。第二列和第三列(.colonnade_u触发器)有子列(span.label),子列应该是粘性的。 但事实并非如此:(

HTML格式

<div class="colonnade">
    <aside class="sidebar colonnade__column alpha">
        <div class="">
            NAVI
        </div>
    </aside>
    <label class="colonnade__trigger alpha" for="colonnade-alpha">
        <span class="label">
            Show Navigation
        </span>
    </label>
    <main class="main" id="main">
    </main>
    <aside class="sidebar colonnade__column omega">
        <div class="">
            CART
        </div>
    </aside>
    <label class="colonnade__trigger omega" for="colonnade-omega">
        <span class="label">
            Show Cart
        </span>
    </label>
</div>

CSS

.colonnade {
    display: flex;
}
.colonnade__trigger {
    display: block;
    width: 2em;
    padding: .5em;
    background-color: #eee;
}
.colonnade__trigger .label {
    position: sticky;
    display: block;
    transform: rotate(90deg);
    transform-origin: 0 100%
}

看我的密码笔 https://codepen.io/bitstarr/pen/QBwMEq