How Can I Keep a Div Scrolled to the Bottom Using Only CSS?

Keep Overflow Div Scrolled to Bottom: A CSS-Only Solution

Consider a scenario where you have a div container limited to a specific height with content dynamically added to it. You want to ensure it remains scrolled to the bottom, except when the user manually scrolls upward. How can you achieve this without using JavaScript?

The answer lies in employing the flex-direction: column-reverse property in your CSS. This technique effectively treats the bottom of the div as the top. As long as the targeted browsers support flexbox, the result is a div that automatically scrolls to the bottom when new content is added.

To illustrate, here's a sample HTML and CSS code snippet:

CSS:

.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

HTML:

<div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Top</div>
</div>

By setting the flex-direction property to column-reverse, the markup order is essentially reversed, ensuring that the content appears as if it's scrolled to the bottom. This method allows you to create a div that remains scrolled to the bottom unless the user explicitly scrolls upward, elegantly addressing the initial problem statement.

The above is the detailed content of How Can I Keep a Div Scrolled to the Bottom Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!