Concept

Overflow in CSS is a property used to determine how to handle content when it does not fit the size of the container. It includes the following properties:

• visible: Display the entire content that exceeds the size of the parent element.
• hidden: Hide content that exceeds the size of the parent element.
• scroll: Display scrollbars for users to scroll and view content that exceeds the size of the parent element.
• auto: Automatically display scrollbars only when necessary, based on the content viewing needs.

Usage

Example

HTML

<div class='result'>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus doloremque necessitatibus consequatur iusto id, vero animi mollitia adipisci inventore et! Ab neque modi corporis qui ea numquam, autem veritatis voluptates!</p>
</div>

CSS

.result {
  position : relative;
  height: 100px;
  background: lightcoral !important;
  font-size: 20px;
  overflow: scroll;
}

Result