I am currently working on creating a dynamic menu bar that has elements which smoothly move upwards on hover. However, I have encountered an issue where this movement effect only works when the parent container contains exactly one element (such as in title-bar-right, unlike in title-bar-left). The other properties, like the font family in this case, change as expected. I have attempted to resolve the issue by removing the transition duration, but it did not fix the problem. Below is what I consider to be the simplest example that reproduces the issue.
#title-bar-left {
justify-content: left;
align-items: left;
float: left;
height: inherit;
}
#title-bar-right {
justify-content: right;
align-items: right;
float: right;
height: inherit;
}
.title-bar-element-container {
height: 100%;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
display: inline-block;
transition-duration: 0.3s;
}
.title-bar-element-container:hover {
margin-top: 10px;
height: 100%;
font-family: monospace;
transition-duration: 0.3s;
}<div id="title-bar">
<flex id="title-bar-left">
<flex class="title-bar-element-container">
<a class="title-bar-element bold-text" href="/main.html">main</a>
</flex>
<flex class="title-bar-element-container">
<a class="title-bar-element" href="/category1.html">Category 1</a>
</flex>
</flex>
<flex id="title-bar-right">
<flex class="title-bar-element-container">
<a class="title-bar-element" href="/category2.html">Category 2</a>
</flex>
</flex>
</div>