I am currently utilizing a CSS setup like this:
.container {
display: flex;
align-items: center;
}
p {
font-size: 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
}
p:hover {
font-size: 20px;
}
<div class="container">
<p>Greetings</p>
</div>
The issue arises when attempting to transition the font size while using the flex property on the parent container. It seems that removing the flex property allows the transition to work properly. Is there a workaround for this problem?