Made aside same height as body

Question

I would like to know how I can make the <aside> height the same height as body, even if it scrolls. The last try I did the body is always full height but the aside not. Please help me :)

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  height: auto;
}

aside.sidebar {
  position: relative;
  bottom: 0;
  left: 0;
  float: left;
  width: 20%;
  height: 100%;
}

aside.sidebar ul {
  width: 100%;
  height: 100%;
}

<aside class="sidebar">
  <ul>
    <li>tag 1</li>
    <li>tag 2</li>
    <li>tag 3</li>
    <!-- some li tags -->
  </ul>
</aside>
<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <!-- some content -->
</main>

Answer 1

Use flexbox. All flex items of a flex parent will stretch to match the parent element's height.

body {
  margin: 0;
  display: flex;
  background-color: lightgray;
  min-height: 2000px;
}

aside {
  width: 20%;
  background-color: gold;
}

<aside class="sidebar">
  <ul>
    <!-- some li tags -->
  </ul>
</aside>
<main>
  <!-- some content -->
</main>

Answer 2

Instead of height:auto on html and body, set it to 100%