Height Overflow

Let's begin with a simple example.

<div class="h-[200px] w-[200px] bg-green-100">
  <div class="bg-red-100">
    Lorem ipsum dolor
  </div>
</div>

What will happen if we add more content to the div?

<div class="h-[200px] w-[200px] bg-green-100">
  <div class="bg-red-100">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quo
    laudantium totam nobis molestiae obcaecati numquam sit modi ex voluptatum?
    Alias architecto tenetur voluptate possimus quaerat veniam provident
    aliquam! Dolor.
  </div>
</div>

Because text wrapping, the inner div increase its height to fit the content. The inner div's height is greater than the outer div's height, so the overflow is visible.

Let's add overflow-y-auto to the outer div to make the content scrollable.

<div class="h-[200px] w-[200px] bg-green-100 overflow-y-auto">
  <div class="bg-red-100">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quo
    laudantium totam nobis molestiae obcaecati numquam sit modi ex voluptatum?
    Alias architecto tenetur voluptate possimus quaerat veniam provident
    aliquam! Dolor.
  </div>
</div>

Let's see what happens if the inner div has height: 100% and outer div does not have overflow-y-auto.

<div class="h-[200px] w-[200px] bg-green-100">
  <div class="h-full bg-red-100">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quo
    laudantium totam nobis molestiae obcaecati numquam sit modi ex voluptatum?
    Alias architecto tenetur voluptate possimus quaerat veniam provident
    aliquam! Dolor.
  </div>
</div>

No scrollbar is shown because the inner div's height is equal to the outer div's height.

What if we add overflow-y-auto to the outer div? Let's see.

<div class="h-[200px] w-[200px] bg-green-100 overflow-y-auto">
  <div class="h-full bg-red-100">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quo
    laudantium totam nobis molestiae obcaecati numquam sit modi ex voluptatum?
    Alias architecto tenetur voluptate possimus quaerat veniam provident
    aliquam! Dolor.
  </div>
</div>

<div class="h-[200px] w-[200px] bg-green-100">
  <div class="h-full bg-red-100 overflow-y-auto">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quo
    laudantium totam nobis molestiae obcaecati numquam sit modi ex voluptatum?
    Alias architecto tenetur voluptate possimus quaerat veniam provident
    aliquam! Dolor.
  </div>
</div>

<div class="h-[200px] w-[200px] bg-green-100 overflow-y-auto">
  <div class="h-full bg-red-100 overflow-y-auto">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum quo
    laudantium totam nobis molestiae obcaecati numquam sit modi ex voluptatum?
    Alias architecto tenetur voluptate possimus quaerat veniam provident
    aliquam! Dolor.
  </div>
</div>