ウィンドウの幅を変更するときに要素を画面外に移動

Question

画面の左側に四角形のdivが絶対配置されています。ビューポートの幅に達すると、どうやって左に押し続けることができますか？私が持っている唯一のアイデアは、javascriptでresizeイベントリスナーを追加し、要素のプロパティが負であると計算することです。

.container { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
} 
 

 
.element { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100vh; 
 
    height: 100vh; 
 
    background-color: lightblue; 
 
}

<div class="container"> 
 
    <div class="element"></div> 
 
</div>

Answer 1

私はあなたの質問を理解してわかりません。要素を左に固定したいのであれば、コードは完璧です。

あなたの目標は、それが特定の画面幅にのみ固執することです作ることであれば、私はあなたが最終的に「シンク」のために、この要素をしたい場合は、css media

として最後を見てお勧めしたいです左の境界線、したがってウィンドウの外に、私はあなたにCSSメディアとcss calc functionの組み合わせを使用することをお勧めします。

これは助けになると思います！