html - IOS safari flex布局bug?

Question

IOS safari下使用flex布局的时候，如果使用display:flex,例如

 html,
    body {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    
    .wrapper {
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    
    .header {
        height: 50px;
        line-height: 50px;
        border-bottom: solid 1px #ccc;
        flex: 0;
    }
    
    .body {
        flex: 1;
    }

    <p class="wrapper">
        <p class="header">
            头部
        </p>
        <p class="body">
            身体
        </p>
    </p>
    <script>
        setTimeout(function() {
            //如果改变了header高度
            document.querySelector('.header').style.paddingTop = '50px'
        }, 300)
    </script>

如果改变了header高度，safari会出现滚动条，就像没有重新进行弹性计算一样。

但使用-webkit-box这种老式的标准并没有出现问题，在桌面各个现代浏览器均没有这种情况发生。

这是个bug吗？还是说我遗漏了什么?

测试环境：ios10

Answer 1

Safari에서 시도했는데 축약된 형식은 레이아웃을 다시 계산하지 않습니다(콘솔에서 element.style.flex='xxx'를 시도하면 적용되지 않음). 축약된 형식을 사용하지 마세요

flex: 1;
이
flex-grow: 1

으로 변경되었습니다.