使用 flex 垂直对齐项目会拉伸子元素

Question

I got multiple child elements ( span ) in a flex container and want to align them vertically using align-items: center :

<div class="w-full mb-1 flex items-center">
    <span class="border borderHighlight px-1" style="font-size: 0.6rem;">{{ badgeTitle }}</span>
    <span class="colorGray01 subText ml-1">&#183; {{ commentTimeStamp }}</span>
    <span class="negative subText font-extrabold text-sm ml-2">&bull;</span>
    <span>&#10003;</span>
</div>

Without the flexbox classes the border of the first span element is fitting the element itself. using flexbox the border is stretching to the biggest height of one of the child elements.

How would I keep the original size of the child element and aligning it vertically centered?

For those not used to Tailwind the style on the parent element literally is:

display: flex;
align-items: center;
width: 100%;
margin-bottom: 1rem;

There are not styles on the child elements that affect this at all. Just some color/font stylings and margins/paddings. It's more of a general css question tho.

Answer 1

Fixed it by wrapping the <span> -Element inside another <span> . Not sure, why it solved the problem or if it's a good way to solve it. But it did the trick.