title: Automatically adjust block height of <aside> to same as <main>using CSS
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {padding: 0;margin: 0;border: 0; padding-top:48px;}
  .header {height:48px; width:100%; background-color:blue; position:fixed; left:0; right:0;top:0; z-index:100;}
  .container {
      display: grid;
      grid-template-columns: 660px 1fr;
      grid-column-gap:10px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      max-width: 1326px;
      margin-top:10px;
      margin-bottom:200px;
  }
  main {background-color:purple; height:600px; display:flex;justify-content:center; align-items:center; color:#FFF; font-size:30px;}
  aside {height: calc(100vh - 48px); position: sticky; top: calc(48px + 15px);display: flex;flex-flow: column;}
  aside .side-gallery {display: grid;grid-column-gap: 15px;grid-row-gap: 15px;grid-template-columns:1fr 1fr 1fr; align-items: flex-start; scrollbar-width: none; -ms-overflow-style: none;overflow-y: scroll; position: relative;max-height: 100%;padding: 0px 10px 10px;}
  aside .side-gallery .item {background-color:green; width:100%; height:120px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="header"&gt;&lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;main&gt;Need "side-gallery" (green grid) to take same height as "main content side" (purple color).&lt;/main&gt;
          &lt;aside&gt;
              &lt;div class="side-gallery"&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
                  &lt;div class="item"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/aside&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  
  Please click view &quot;Full page&quot; to view the code result.</p>
  <p>I basically have 3 major elements on my website. A &quot;fixed header&quot; (blue color), &quot;main content side&quot; that always different in height size (purple color) and &quot;side-gallery with different articles&quot; (green color) with max-height of 100vh.</p>
  <p>What I need: I need to make my sticky side-gallery (green color) be same height as &quot;main content side&quot; (purple color). Obviously I can simply set &quot;height&quot; of it, but since my &quot;main content side&quot; (purple color) is always changing, I need side-gallery (green color) to take same height automatically. Do not know how to achieve it. Only CSS solutions, please.</p>