CSS Tips Vertical Line Rule

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.

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

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;
}

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!