<div class="page-wrap">
  <header></header>
  <main>

  </main>
  <aside>
    <div class="sticky"></div>
  </aside>
  <footer></footer>
</div>

body {
  // ok with sticky
  overflow-x: hidden;
}

.page-wrap {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 100px 1fr auto;
  gap: 1rem;

  // Make sure there is room enough to actually be sticky.
  height: 10000px;
  > * {
    border: 1px solid #ccc;
    border-radius: 8px;
    background: white;
  }

  // Whaaaat
  // transform: scale(0.5);
  // transform-origin: top center;

  // Scrollby
  // transform: rotate(40deg);

  // Breaks Sticky
  // overflow: hidden;
  // overflow-x: hidden;
  // overflow-y: hidden;
}

body {
  margin: 0;
  padding: 1rem;
  background: #eee;
}

header,
footer {
  grid-column: 1 / -1;
  height: 100px;
}
footer {
  height: 1000px;
}

aside {
  padding: 1rem;

  // If you're going to do bottom sticky
  // display: grid;
  // align-items: end;

  // This would break sticky, as it's not stretching anymore.
  // align-self: start;

  // Breaks sticky at this level, too.
  // overflow: hidden;
}

// Careful you are applying it to an element that supports it. For example, Chrome doesn't support <thead> or <tr> at the moment (but it's a bug).
.sticky {
  height: 200px;
  background: black;
  border-radius: 5px;

  // transform: rotate(-40deg);

  // Careful the browser supports this. It's fairly safe these days, but no IE.
  // Also, old-Safari needs a -webkit- vendor prefix;
  position: sticky;

  // Careful to use positioning! Without this (or another direction), sticky does nothing.
  top: 1rem;
}

.not-sticky {
  height: 100px;
  background: orange;
  border-radius: 5px;
}