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!
Web Component Essentials
Build reusable UI components with my new Course & E-Book!
Start now!