<article>
  <h2>overflow: hidden</h2>
  <aside>
    <svg t="1652665249842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1903" width="200" height="200">
      <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM676.1 657.9c4.4 5.2 0.7 13.1-6.1 13.1h-58.9c-4.7 0-9.2-2.1-12.3-5.7L512 561.8l-86.8 103.5c-3 3.6-7.5 5.7-12.3 5.7H354c-6.8 0-10.5-7.9-6.1-13.1L470.2 512 347.9 366.1c-4.4-5.2-0.7-13.1 6.1-13.1h58.9c4.7 0 9.2 2.1 12.3 5.7L512 462.2l86.8-103.5c3-3.6 7.5-5.7 12.3-5.7H670c6.8 0 10.5 7.9 6.1 13.1L553.8 512l122.3 145.9z" p-id="1904"></path>
    </svg>
  </aside>
</article>

<article>
  <h2>overflow-y: scroll</h2>
  <aside>
    <svg t="1652665249842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1903" width="200" height="200">
      <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM676.1 657.9c4.4 5.2 0.7 13.1-6.1 13.1h-58.9c-4.7 0-9.2-2.1-12.3-5.7L512 561.8l-86.8 103.5c-3 3.6-7.5 5.7-12.3 5.7H354c-6.8 0-10.5-7.9-6.1-13.1L470.2 512 347.9 366.1c-4.4-5.2-0.7-13.1 6.1-13.1h58.9c4.7 0 9.2 2.1 12.3 5.7L512 462.2l86.8-103.5c3-3.6 7.5-5.7 12.3-5.7H670c6.8 0 10.5 7.9 6.1 13.1L553.8 512l122.3 145.9z" p-id="1904"></path>
    </svg>
  </aside>
</article>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

article {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40vw;
  aspect-ratio: 16 / 9;
  border: 5px solid #f6f6f6;
  position: relative;
  padding: 1rem;
  background: url(https://picsum.photos/300/300) top right no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.36) 1px, transparent 1px) left top
      repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.36) 1px, transparent 1px) left
      top repeat,
    linear-gradient(rgba(255, 255, 255, 0.36) 1px, transparent 1px) left top
      repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.36) 1px, transparent 1px) left
      top repeat,
    linear-gradient(
        135deg,
        rgba(84, 232, 220, 0.51) 0%,
        rgba(241, 231, 103, 0.51) 25%,
        rgba(240, 229, 104, 0.51) 50%,
        rgba(254, 182, 69, 0.51) 75%,
        rgba(250, 118, 47, 0.51) 100%
      )
      left top repeat;
  background-size: calc(2rem + 8px) 4rem, 20px 20px, 20px 20px, 20px 20px,
    20px 20px, 100% 100%;
  background-blend-mode: difference, hard-light, overlay, screen, saturation;
}

article > h2 {
  color: #fff;
  white-space: nowrap;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 0.8);
  font-size: clamp(1.2rem, 1.5rem + 2vw, 2rem);
}

aside {
  position: absolute;
  top: 0;
  right: 0;
  background: #ff0016b5;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

aside svg {
  width: 2rem;
  height: 2rem;
  display: block;
  fill: #fff;
}

article:last-of-type {
  overflow-y: scroll;
}

article::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  background-color: rgb(220 22 34 / 0.25);
}

article::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f5f5;
}

article::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d62929;
  background-image: linear-gradient(
    90deg,
    transparent,
    rgb(120 120 120 / 0.4) 50%,
    transparent,
    transparent
  );
}