CODEWITHSUNDEEP
cssflexboxsticky
Anathapindika
Anathapindika

Reputation: 141

css, flex-direction, sticky element

I'm working with flex and two modes to change the flex-direction:

@mixin for-medium-up {
@media (min-width: 670px) { @content; }
}
@mixin for-large-up {
@media (min-width: 880px) { @content; }
}

In the first mode (min-width: 880px), I want to have a sticky element on the right-hand side as follows:

enter image description here

the sticky element is defined as follows:

.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
}

In the second mode (min-width: 670px), I want to have it as follows:

enter image description here

where the sticky element is sticky in the first mode, it does not stick in the second one.

here is the Demo

Upvotes: 1

Views: 753

Answers (1)

Neil Docherty
Neil Docherty

Reputation: 555

The answer isn't quite as simple as attaching something to the parent element.

I've modified your demo and made some simplifications for clarity but I believe it achieves your intended goal.

Modified Demo

Consider the case where the elements are side-by-side...

The default value of align-items for flex box items is stretch (see MDN Docs). This means that the .view element grows in size to fill the full height, meaning that it never has the opportunity to become "stuck". This can be addressed by using align-self: flex start or by explicity setting the height, e.g. height: 100px.

If you un-comment line 10 and comment-out line 11, you'll see the issue.

Hope this helps.

Upvotes: 1

Related Questions