CSS, Flex-Richtung, klebriges Element

Question

Ich arbeite mit Flex und zwei Modi, die die Bieger Richtung zu ändern:

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

Im ersten Modus (min-width: 880px), mag ich habe ein klebriges Element auf der rechten Seite wie folgt:

die klebrige Element wird wie folgt definiert:

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

Im zweiten Modus (min-width: 670 Pixel), will ich es habe wie folgt:

wo das klebrige Element klebrig im ersten Modus ist, es klebt nicht in dem zweiten .

hier ist die Demo

Answer 1

Die Antwort als Befestigung etwas auf das übergeordnete Element nicht ganz so einfach ist.

Ich habe Ihre Demo geändert und einige Vereinfachungen vorgenommen, um Klarheit zu schaffen, aber ich glaube, dass es Ihr angestrebtes Ziel erreicht.

Modified Demo

der Fall betrachtet, wo die Elemente Seite an Seite sind ...

Der Standardwert für align-items flex Feldelemente ist stretch (siehe MDN Docs). Dies bedeutet, dass das .view Element in der Größe wächst, um die volle Höhe zu füllen, was bedeutet, dass es nie die Möglichkeit hat, "stecken zu bleiben". Dies kann unter Verwendung von align-self: flex start oder durch explizites Einstellen der Höhe, z. height: 100px.

Wenn Sie Zeile 10 auskommentieren und Zeile 11 auskommentieren, wird das Problem angezeigt.

Hoffe, das hilft.