Is there any way to have flexbox equal height columns with baseline font alignment of text with varying font sizes and font familys?

user_6922530 0
Viewed 47

Equal heights and baseline are not a problem. However, if I'd like a hover effect on the element that displays the text with a differing font size, it is shifted out of alignment. I'm willing to use Javascript or any other solution, but am having trouble finding a way to fix the element that has the hover effect so that it doesn't get shifted out of alignment when the baseline is applied.

Simple Example:

.wrapper {
  height: 50px;
  display: flex;
  align-items: baseline;
}

.column {
  height: 100%;
  display: flex;
  align-items: center;
}

.span1, .span2 {
  height: 100%;
  display: inline-flex;
  align-items: flex-end;
}

.span1:hover, .span2:hover {
  background-color: gray;
}

.span1 {
  justify-content: flex-start;
  margin-right: 4px;
  font-size: 32px;
}

.span2 {
  justify-content: flex-end;
  margin-left: 4px;
  font-size: 8px;
}
<div class="wrapper">
  <div class="column">
    <span class="span1">Some content</span>
  </div>
  <div class="column">
    <span class="span2">Some content</span>
  </div
</div>

flexbox css html javascript
1 Answers

You can simulate your hover effect using a big pseudo element that will cover all the area creating the illusion of equal columns:

.wrapper {
  display: flex;
  align-items: baseline;
  overflow:hidden;
}

.column {
  display: flex;
  align-items: center;
}
.column > span {
  position:relative;
  z-index:0;
}
.span1:hover::before, 
.span2:hover::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:-200px;
  bottom:-200px;
  left:0;
  right:0;
  background-color: gray;
}

.span1 {
  margin-right: 4px;
  font-size: 32px;
}

.span2 {
  margin-left: 4px;
  font-size: 8px;
}
<div class="wrapper">
  <div class="column">
    <span class="span1">Some content</span>
  </div>
  <div class="column">
    <span class="span2">Some content</span>
  </div>
</div>

user_86203330
Related