CSSが最大幅を使用してvwと左の位置を計算する

Question

ビューポートの幅と要素の左の位置を使ってCSSの最大幅を計算する方法はありますか？私は、アップロードされたスプレッドシートの列に応じて成長することができる動的なテーブルを含むdivがあります。私は100vwで簡単にできるコンテナの最大幅と水平スクロールを適用できるようにしたい。しかし、私はユーザーが切り替えられるサイドバーも持っています。だから私は最大幅を計算する最良の方法は100vw - [left position of container div]を介していると思うか、誰かがこれを純粋にCSSを使用してより良いソリューションを提案することができます。

Answer 1

グーグルでは、これはサポートされていないようです。

ただし、サイドバーがトグルされたときに本体に追加されたクラスを使用して問題を解決しました。サイドバーの幅が固定されていることを考慮して、私は次のようにしました。

body{ 
    div.horizontal-scroll { 
     max-width: calc(100vw - 310px); 
    } 
    &.sidebar-hidden { 
     div.horizontal-scroll { 
      max-width: calc(100vw - 80px); 
     } 
    } 
}