<div class="overflow overflow--scroll">
  <div class="element">
    <h2><small>overflow: scroll</small> scrollbar-gutter: auto</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, asperiores tempore debitis sunt porro.</p>
    <p class="hidden content">ipsum dolor sit amet consectetur adipisicing elit. Aliquam, asperiores tempore debitis sunt porro.</p>
  </div>
</div>
<div class="overflow overflow--auto">
  <div class="element">
    <h2><small>overflow: auto</small> scrollbar-gutter: auto</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, asperiores tempore debitis sunt porro.</p>
    <p class="hidden content">ipsum dolor sit amet consectetur adipisicing elit. Aliquam, asperiores tempore debitis sunt porro.</p>

  </div>
</div>

<div class="actions">
  <button class="button">Toggle Content</button>
</div>
@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: grid;
  align-items: start;
  align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 2rem;
  padding: 1rem;
}

.overflow {
  width: 100%;
  max-block-size: 300px;
  border: 1px solid #f9f9f9;
  border-radius: 4px;
  box-shadow: 0 0 1px rgb(0 0 0 / 0.4);
  padding: 20px;
  background-color: rgb(190 90 90 / 0.5);
}

.element {
  width: 100%;
  padding: 0.622em;
  background: linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(
      135deg,
      rgba(84, 232, 220, 1) 0%,
      rgba(241, 231, 103, 1) 25%,
      rgba(240, 229, 104, 1) 50%,
      rgba(254, 182, 69, 1) 75%,
      rgba(250, 118, 47, 1) 100%
    );
  background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 100% 100%;
  background-blend-mode: hard-light, overlay, screen, saturation;
  color: #000;
  letter-spacing: 0.0125em;
  hyphens: auto;
  text-shadow: 1px 1px 0 rgb(255 255 255 / 50%);
  font-size: 1.25em;
}

.element > * + * {
  margin-block-start: 1rem;
  line-height: 1.6;
}

h2 {
  text-align: center;
}

h2 > small {
  display: block;
  font-size: 0.8em;
  padding-bottom: 0.25em;
  border-bottom: 2px dashed currentColor;
  margin-bottom: 0.25em;
}

.actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  padding: 2rem;
  background: rgb(16 18 27 / 40%);
  backdrop-filter: blur(20px);
}

.button {
  --background-color: #1b86f9;
  -webkit-appearance: button;
  background-color: var(--background-color);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 1em 2em;
  box-shadow: 0 0 0.2em var(--background-color);
  cursor: pointer;
  font-family: "Exo", Arial, sans-serif;
  transition: all 0.28s ease-in-out;
}

.button:focus,
.button:hover {
  --background-color: #3f51b5;
}

.hidden {
  display: none;
}

.overflow {
  scrollbar-gutter: auto;
}

.overflow--scroll {
  overflow-y: scroll;
}

.overflow--auto {
  overflow-y: auto;
}
let addContent = document.querySelector(".button");
let contents = document.querySelectorAll(".content");

addContent.addEventListener("click", () => {
  contents.forEach((content) => {
    content.classList.toggle("hidden");
  });
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.