Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
CSS

CSS Tips Vertical Line Rule

Cory Rylan

- 1 minute

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

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

CSS

CSS Interaction Theming with Accent Color and Color Contrast

Learn how to leverage new and proposed CSS features to make various interaction theming easy and accessible across a variety of UI components.

Read Article
Web Components

Style States with Web Components and CSS Custom Properties

Learn how to leverage CSS Custom Properties to make our Web Component styles easy to understand and maintain with multi-state components.

Read Article
CSS

Converting CSS Pixels to Rems

Learn how to convert CSS pixel values to rem to provide scalable typography features and improve accessibility with page zoom.

Read Article