Give CSS the exact pixel width of the viewport for situations when 100% doesn't work

--window-width-css-var.js

var updateWindowWidthVar = function(){
      // console.log('Resized finished.', window.innerWidth);
      document.documentElement.style.setProperty( '--window-width', window.innerWidth + 'px' );
  };
  updateWindowWidthVar();
  window.onresize = updateWindowWidthVar;
  // window.onresize = _.debounce(updateWindowWidthVar, 150); // debounced version (only fires once when resize is done) to not impact performance of app (needs lodash)
  
  

example.css

/*
this will position the element at the right even when it's in another positioned element
*/

.bla{
  position: absolute;
  width: 123px;
  left: calc( var(--window-width) - 123px );
}