CSS display inline-flex not correctly lined up in some devices

Question

I have a website with some HTML code that is displayed differently according to the device, even when using Google Chrome in all of them.

This is how it is displayed in one of them:

As you can see inside the red circle the text is not properly lined up. So it should be like in the following screenshot (taken with another device):

In this case, the character 私 is lined up with the other characters of the same font size.

And this is a snippet, where you might see it as image (1) or (2) depending on your device.

 .markdownContainer { padding: .5rem; word-break: break-word; }.example { border: 0; text-align: center; font-size: 1.15rem; }.mdContainer { background-color: #fff; padding: .35rem; margin: 1rem.5rem; border-radius: 5px; border: 1px solid; }.kanji { display: inline-flex; flex-direction: column-reverse; text-align: center; }.kanji>span { font-size: .5rem; margin-bottom: -.25rem; }.example>.kanji>span { font-size: .7rem; }

 <div class="mdContainer example"><span class="kanji">私<span>わたし</span></span>はスペイン<span class="kanji">人<span>じん</span></span><span class="primary">だ</span><br>I am Spanish</div> <div class="markdownContainer">Number + <span class="kanji">時<span>じ</span></span><br><span class="kanji">半<span>はん</span></span> can be appended to indicate "and a half"</div>

It is not working in the following devices:

Operating System: Android 10

Google Chrome version: 108.0.5359.128

Operating System: Ubuntu 20.04 (no updates available, at least for Chrome)

Google Chrome version: 108.0.5359.124

The one where it's working:

Google Chrome version: Chrome 107.0.5304.105

Operating System: Android 13

But it's also working in Chrome of Iphone devices for example (can't check the version since I don't have, but I had the change to check it and it was okay).

My only guess is one update of google chrome broke it, and the devices where it does not work it's because they are not updated yet. But I checked the changelog of chrome and couldn't find anything, so I wonder if the code is actually correct or not.

Any ideas what could be going on?

EDIT: I updated the question to add another type of container with the same issue. You can see it also in here https://www.fluento.net/jp/N5/grammar/card/number-%E6%99%82

Since the string with the information comes as a String with some custom markdown, I have no easy way of adding span around the normal text. So if there is a way to do it without setting display: flex I would prefer doing it that way.

Answer 1

You are never aligning your elements to the bottom; therefore, by default, elements try to take up the space that's already available (ie, space at the top of the page). You need to make a flex and align the items as such:

CSS:

.example {
    border: 0;
    text-align: center;
    font-size: 1.15rem;
}
    
.mdContainer {
    background-color: #fff;
    padding: .35rem;
    margin: 1rem .5rem;
    border-radius: 5px;
    border: 1px solid;
}

.container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
}

.kanji {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
}

.kanji>span {
    font-size: .5rem;
    margin-bottom: -.25rem;
}

.example>.kanji>span {
    font-size: .7rem;
}

HTML:

<div class="mdContainer example">
    <div class="container">
        <span class="kanji">私<span>わたし</span></span>
        <span>はスペイン</span>
        <span class="kanji">人<span>じん</span></span>
        <span class="primary">だ</span>
    </div>
    
    <span>I am Spanish</span>
</div>

Answer 2

Finally I went with the usage of the ruby HTML. It does not directly resolve the question, but it solves my issue.

Leaving the question open in case someone can figure out how to properly do this without the ruby tag.