title: Resize child content based on container size
body: <p>I have a simple prototype of a progress bar here.</p>
  <p><a href="https://codepen.io/pixy-dixy/pen/mdPOgEL" rel="nofollow noreferrer">Here is the CodePen...</a></p>
  <p>And here is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const progressBar = document.getElementById("progress-bar");
  progressBar.classList.add("progressBarShow");</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html{
    overflow: hidden;
    -webkit-user-select: none; 
    user-select: none;
  }
  
  .containerProgress{
    position: relative;
    overflow: hidden;
    left: 0vw;
    top: 60vh;
    margin: 0 auto;
    height: 24vh;
    width: 41vw;
    outline: 0.1vw dashed orange;
  }
  
  .progress-bar-class {
    position: absolute;
    width: 0vw;
    height: 9.436435124508519vh;
    margin: 8.9vh 0vw 0vh  2vw;
    background: repeating-linear-gradient(-45deg, red, red 2.80299479166666659491vw, orangered 2.80299479166666659491vw, orangered 5.60598958333333297455vw);
    border-radius: 18vh;
    box-shadow: inset 0vw 7.8636959370904332vh 1.40149739583333318982vw rgba(255, 255, 255, 0.1), inset 0vw 0.7863695937090432vh 0vw rgba(255, 255, 255, 0.3), inset 0vw -3.9318479685452166vh 0.42044921875vw rgba(0, 0, 0, 0.2), 0vw 2.3591087811271296vh 0.280299479166666681018vw rgba(0, 0, 0, 0.3);
    left: -0.70074869791666659491vw;
    top: 20vh;
    width: 2.2vw;
  }
  
  #progress-bar:after {
    position: absolute;
    width: 30vw;
    height: 16vh;
    background: rgba(13, 13, 13, 0.7);
    border-radius: 18vh;
    content: "";  
    left: -0.70074869791666659491vw;
    top: -3.25vh;
    z-index: -1;
  }
  
  .progressBarShow {
      animation: progressShow 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000);
      animation-delay: 0.5s;
      animation-fill-mode: forwards ;
  }
  
  @-webkit-keyframes progressShow {
    from { top: 20vh;}
    to   { top: -3.25vh;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="containerProgress"&gt; 
  &lt;div id="progress-bar" class="progress-bar-class"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Please resize your browser. As you see the content of the container (Which is the progress bar) resizes relative to the browser size. (Here in this snippet it's not clear but if you use Codepen or reproduce the code locally it's obvious)</p>
  <p>if you decrease the width of the browser the width of the content decreases and if you decrease the height of your browser the height of the content decreases too and vice versa.</p>
  <p>Now look at the <code>.containerProgress</code> class inside the CSS code.</p>
  <p>We have these <code>height: 24vh; width: 41vw;</code> OK.</p>
  <p>if we decrease the <code>height</code> or increase the <code>width</code> of this container the content does not resize proportionally...</p>
  <p>What I want is a CSS modification to resize the content when we resize only the container.</p>
  <p>I mean if we set the width and height of the container to something like <code>height: 14vh; width: 51vw;</code> the content should be resized based on the new width and the new height of <code>.containerProgress</code>. Just like what we get when we resize the browser.</p>
  <p>It may be easy for you to achieve but it's almost impossible for me to do...
  So I really appreciate your help...</p>