Chrome 73导致的flex布局崩坏 以及IOS fixed 失效问题

Chrome 73导致的flex布局崩坏

现象

项目中会存在如下几种嵌套flex结构：

<style>
  /* 通用样式 */
  .card {
    width: 200px;
    height: 300px;
    margin: 20px;
    border: 1px solid #999;
  }
  .flex {
    display: flex;
    flex-direction: column;
  }
  .header {
    flex: none;
    height: 40px;
    border-bottom: 1px solid #333;
  }
  .scroll {
    overflow-y: auto;
  }
  .p {
    margin: 10px;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.2);
  }  
</styl>

<!-- 布局一 -->
<div class=“card flex”>
<div class=“header”>Header</div>
<div class=“flex”>
<div class=“scroll”>
<div class=