<section>
    <div class="overflow-visible">
      <h2>Overflow visible</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum vel repudiandae numquam distinctio eius cum eligendi sit nesciunt! Aliquid ut laboriosam quis laborum, sit optio suscipit enim possimus ad aut!
    </div>
    <div class="overflow-hidden">
      <h2>Overflow hidden</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum vel repudiandae numquam distinctio eius cum eligendi sit nesciunt! Aliquid ut laboriosam quis laborum, sit optio suscipit enim possimus ad aut!
    </div>
    <div class="overflow-scroll">
      <h2>Overflow scroll</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum vel repudiandae numquam distinctio eius cum eligendi sit nesciunt! Aliquid ut laboriosam quis laborum, sit optio suscipit enim possimus ad aut!
    </div>
    <div class="overflow-auto">
      <h2>Overflow auto</h2>
      <button id="btn-toggle">toggle scroll</button>
    </div>
    <div class="overflow-clip" id="overflow-clip" >
    <h2>Overflow clip</h2>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum vel repudiandae numquam distinctio eius cum eligendi sit nesciunt! Aliquid ut laboriosam quis laborum, sit optio suscipit enim possimus ad aut!
  </div>
</section>
html {
  background: #FFF8DC;
  padding: 2rem;
}
button {
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  border: 0;
  display: block;
  margin: 0 auto;
}
section {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}
h2 {
  margin: 0;
}
div {
  width: 9rem;
  height: 9rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 3px dashed gray;
}
.overflow-visible {
  background-color: pink;
  overflow: visible;
}

.overflow-hidden {
  background-color: lightblue;
  overflow: hidden;
}
.overflow-scroll {
  background-color: lightgreen;
  overflow: scroll;
}

.overflow-auto {
  background-color: orange;
  overflow: auto;
}

.overflow-clip {
  border-radius: 0 !important;
  background-color: #cdb4db;
  overflow: clip;
  overflow-clip-margin: 2rem;
}
document.getElementById('btn-toggle').onclick = function(){
 const div =  document.getElementsByClassName('overflow-auto');
 div[0].innerHTML = 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit praesentium accusantium natus commodi dolor alias tempora ea nesciunt sapiente, laudantium amet, harum aut. Tempora beatae consectetur deserunt quis, corporis veniam.';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.