CSS、フレックス方向、粘着性の要素

Question

私はフレックス方向を変更するためにフレックスと二つのモードで働いている：

最初のモード（最小幅：880px）で

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

、私が持っていると思います右側の粘着性要素は、次のように次のよう

スティッキー要素が定義されている：

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

粘着性の要素が第1のモードで粘着性である

は、それが二番目に固執しない：第2のモードでは

次のように（最小幅は670px）、私はそれを持ってしたいです。ここ

答えは親要素に何かを取り付けるほど単純ではありませんDemo

Answer 1

です。

私はあなたのデモを修正し、分かりやすくするために単純化しましたが、私はあなたの意図する目標を達成すると信じています。

Modified Demo

要素がサイド・バイ・サイドである場合を考える...フレックスボックスアイテムのalign-itemsの

デフォルト値は（MDN Docs参照）stretchあります。これは、.view要素が完全な高さを埋めるようにサイズが大きくなることを意味します。つまり、「スタック」する機会は決してありません。これは、align-self: flex startを使用するか、または高さを明示的に設定することによって対処することができます。 height: 100px。

行10とコメントアウト行11のコメントを外すと、その問題が表示されます。

これが役に立ちます。