How can I make a divider inside a CSS flex container with dynamic size?

February 26, 2024

I want to display a vertical divider between some elements in a horizontal CSS flex container.

This divider should be as high as necessary, depending on the height of the other elements in the container (e.g. the height of the container, minus 10 %).

This is what I currently have:

.background {
  background-color: #aaaaaa;
  padding: 10px;
}
.block {
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px 15px 5px 15px;
}
.divider span {
  border-left-style: solid;
  border-left-width: 3px;
  border-color: red;
  margin: 0px 10px 0px 10px;
}

<div class="background">
  <div class="block">
    <div>
      Left part<br>2nd line
    </div>
    <div class="divider">
      <span></span>
    </div>
    <div>
      Right part<br>2nd line
    </div>
  </div>
</div>

I can make it (sort of) work by specifying an absolute height for the divider, but then it doesn’t scale with the surrounding elements anymore:

.divider span {
  border-left-style: solid;
  border-left-width: 3px;
  border-color: red;
  margin: 0px 10px 0px 10px;
  display: inline-block;
  height: 35px;
}

If I try to specify the height as a percentage (e.g. height: 90 %;), the divider becomes completely invisible.

This is how I would want it to look like (approximately):

How can I fix this?

>Solution :

span is default to be an inline element, which doesn’t accept height. You can remove the span and move the divider style to the div.

.background {
  background-color: #aaaaaa;
  padding: 10px;
}
.block {
  background-color: white;
  display: flex;
  flex-direction: row;
  padding: 5px 15px 5px 15px;
}
.divider{
  border-left-style: solid;
  border-left-width: 3px;
  border-color: red;
  margin: 0px 10px 0px 10px;
}

<div class="background">
  <div class="block">
    <div>
      Left part<br>2nd line
    </div>
    <div class="divider">
    </div>
    <div>
      Right part<br>2nd line
    </div>
  </div>
</div>

If you need the divider to be a percentage of the height of its parent container, you can’t set the percentage on the div directly because its parent’s height is not specified.

.background {
  background-color: #aaaaaa;
  padding: 10px;
}

.block {
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 5px 15px 5px 15px;
}

.divider {
  display: flex;
}

.divider span {
  height: 60%;
  align-self: center;
  border-left-style: solid;
  border-left-width: 3px;
  border-color: red;
  margin: 0px 10px 0px 10px;
}

<div class="background">
  <div class="block">
    <div>
      Left part<br>2nd line
    </div>
    <div class="divider">
      <span></span>
    </div>
    <div>
      Right part<br>2nd line
    </div>
  </div>
</div>