position: sticky not working within flexbox child

Question

I have a flexbox with 5 direct children. The second and third column (.colonnade__trigger) have children (span.label) which should be sticky. But it is not :(

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

See my Codepen for the scenario https://codepen.io/bitstarr/pen/QBwMEq

Answer 1

You need to specify a position where it should be fixed. Do this by assigning something like top: "your wanted distance"px;

e.g.:

.colonnade__trigger .label {
position: sticky;
top: 10px;
display: block;
transform: rotate(90deg);
transform-origin: 0 100%
}

Look at MDN - Sticky Position