Issue getting CSS calc width with JS

Question

I need to make a square element that is based off of the width of the screen. To set the height the same as the width, I tried using JS, but it seems to get it slightly wrong. Here is an example

var square = document.getElementById('square');
square.style.height = square.clientWidth + 'px';

#square {
  background-color: blue;
  width: calc(20vw - 16px);
  padding: 8px;
}

<div id="square">Element</div>

The blue "square" above is not square. Could any explain why? Instead of clientWidth, I've tried scrollWidth and offsetWidth with similar results. I haven't gotten style.width to give out a correct number either.

Even if you inspect, on Chrome, the blue square you get a number for the height and width that are close but still very different.

Answer 1

Two issues. First you need to consider the padding, so add box-sizing:border-box then you defined the width using vw unit, so you will have a sqaure only when you open the page the first time and never resize the browser.

var square = document.getElementById('square');
square.style.height = square.clientWidth + 'px';

#square {
  background-color: blue;
  width: calc(20vw - 16px);
  padding: 8px;
  box-sizing:border-box;
}

<div id="square">Element</div>

if you want a square that stay on window resize you need to use the same specified value and not the computed value in pixel (How do you read CSS rule values with JavaScript?)

Or change the value on resize:

var square = document.getElementById('square');
square.style.height = square.clientWidth + 'px';

window.onresize=function() {
  square.style.height = square.clientWidth + 'px';
};

#square {
  background-color: blue;
  width: calc(20vw - 16px);
  padding: 8px;
  box-sizing:border-box;
}

<div id="square">Element</div>

---

As a side note you can consider CSS variable to specify the same value only once or check this : Maintain the aspect ratio of a div with CSS

#square {
  --v:calc(20vw - 16px);
  background-color: blue;
  width: var(--v);
  height: var(--v);
  padding: 8px;
  box-sizing:border-box;
}

<div id="square">Element</div>

Answer 2

You can just use the same calc for the height

width: calc(20vw - 16px);
height: calc(20vw - 16px);