How to combine flexbox and vertical scroll in a full-height app with CSS?

Spread the love

Sometimes, we want to combine flexbox and vertical scroll in a full-height app with CSS.

In this article, we’ll look at how to combine flexbox and vertical scroll in a full-height app with CSS.

How to combine flexbox and vertical scroll in a full-height app with CSS?

To combine flexbox and vertical scroll in a full-height app with CSS, we set the overflow-y property.

For instance, we write

#container article {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 0px;
}

to add the overflow-y: auto; style to show the vertical scroll bar when there’s content overflowing vertically.

We use flex: 1 1 auto; to stretch the element to fit its parent.

Conclusion

To combine flexbox and vertical scroll in a full-height app with CSS, we set the overflow-y property.

Leave a Reply

Your email address will not be published. Required fields are marked *