为什么在 Safari 移动设备上使用 flexbox 的图像位置会损坏？

Question

我在 iPhone（Retina 显示屏）上的 Safari 浏览器中的图像位置有问题。正如您可能看到的那样，当网站处于移动版本时，我将 flex-direction 从 row 更改为 column 和图像大小，因为它被忽略了。它与 div.text

重叠

编辑：已解决： 我刚刚从 .avatar-wrap 行中删除了 flex: 0 0 20%，一切正常。

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

和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

已解决：我刚刚从 .avatar-wrap 行中删除了 flex: 0 0 20%，一切正常。

为什么在 Safari 移动设备上使用 flexbox 的图像位置会损坏？

Why is image position with flexbox broken on Safari mobile?

html

css

flexbox

mobile-safari

retina-display