Reports

It seems it happens because of text adjustment inflation - display: flex; shrinks the container and text snaps to correct size value.

Putting height: 100%; works too for me, which impacts less than display: flex;, so I'm sticking to this for now. (width: 100% or *-content might work also).

What I'm doing right now to let other developers know the hell happens I came up with this little snippet in SCSS (you can reduce it down to a class name).

/**
 * https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
 * https://stackoverflow.com/questions/39550403/css-displayinline-block-changes-text-size-on-mobile
 */
@mixin DisabledTextSizeAdjust {
    @supports (text-size-adjust: 80%) {
        text-size-adjust: none
    }

    @supports not (text-size-adjust: 80%) {
        height: 100%;
    }
}

And use it on the weird texts

.box {
  @include DisabledTextSizeAdjust;
}

79629167