Why is image position with flexbox broken on Safari mobile?

Question

I have problem with image position in Safari browser on iPhone(Retina display). As you may see when site is in mobile version I change flex-direction from row to column and image size as it was ignored. It's overlapping the div.text

EDIT: Solved: I just removed flex: 0 0 20% from .avatar-wrap line and everything works.

HTML:

<div class="reference">
        <p class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.
        </p>
        <div class="avatar-wrap">
            <img src="./assets/img/avatar.png" class="avatar">

            <div>
                John Doe <br>CEO at <a href="johncompany.com">johncompany.com</a>
            </div>
        </div>
</div

and CSS:

div.reference
    width: 90% 
    display: flex
    align-items: center
    color: gray
    margin-top: 20px

    @media screen and (max-width: 1240px)
        flex-direction: column
        width: 100%
        font-size: .9em

    p
        padding: 20px

        &:before
            content: '“'
        &:after
            content: '”'

    .avatar-wrap
        flex: 0 0 20%

        display: flex
        flex-direction: column

        justify-content: center
        align-items: center             

        div
            margin-top: 15px
            text-align: center

            a
                color: black

.avatar
    max-height: 256px

Answer 1

Solved: I just removed flex: 0 0 20% from .avatar-wrap line and everything works.