CSS or jQuery? How to get circle based on container with flexible size?

Question

This is my code:

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#container {
  width: 50%;
  height: 50%;
}

#shape {
  border: 20px solid red;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

<div id="container">
  <div id="shape"></div>
</div>

The container always should be filled with a perfect circle, not with such an ellipse. So height and width of the #shape should always be the same, and should fill the #container as good as possible.

Is it possible to do that with CSS only? Or is jQuery needed?

Answer 1

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#container {
  width: 50vw;
  height: 50vw;
}

#shape {
  border: 20px solid red;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

<div id="container">
  <div id="shape"></div>
</div>