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

sina
February 26, 2024
222 views
3 votes
3 Answers

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?

Tags: css html

Answers

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>

You need to set a height to parent element .divider

.background {
  display: flex;
  height: auto;
  background-color: #aaaaaa;
  padding: 10px;
}
.block {
  background-color: white;
  display: flex;
  height: auto;
  flex-direction: row;
  align-items: center;
  padding: 5px 15px 5px 15px;
}

.divider{
  display: flex;
  height: 100%;
}



.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’m not totally happy with the vertical bar being an element in the DOM as it’s there only for visual effect.

You could instead have the vertical bar as a before pseudo element.

For example:

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

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

.block>div {
  position: relative;
  padding: 0 5px;
}

.block>div::before {
  content: '';
  position: absolute;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 2px;
  height: 80%;
}

.block>div:first-child::before {
  display: none;
}

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

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers