Using CSS Flexbox, we can easily make vertical line dividers that can expand and fill the parent container. First, let’s start with a basic horizontal rule between two paragraphs.

  <p>some text conent</p>
  <hr />
  <p>some text conent</p>

Basic Horizontal Rule with HTML and CSS

To style our horizontal rule to a vertical style, we need to write some CSS for the parent div and the hr element.

div {
  display: flex;

First, we make the div container a flex parent. This style will default the container items to flex-direction: row, which will place each item side by side.

hr {
  min-height: 100%;
  max-height: 100vh;
  margin: 0;

Vertical Line Rule with HTML and CSS

Once our items are displayed horizontally, we can adjust our hr to expand vertically. Using a combination of min-height and max-height, we can fill the div. Min height of 100% will expand while the max height using 100vh will limit the hr not to grow more than the viewport height.

Check out the working demo below!

View Demo Code