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

I tried it in Safari, the abbreviated form will not recalculate the layout (try element.style.flex='xxx' in the console, it will not take effect), do not use the abbreviated form

Just change

flex: 1;
to
flex-grow: 1; and it will work