flex：1不在safari上滚动？

Question

我有此代码：

.parent { 
  width: 100%;
  display: flex;
  height: 100%;
  flex-direction: column;
}

这是我要滚动的孩子：

.child {
    flex: 1 1 0%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    margin-bottom: 84px;
}

该子项将包含多个div，这是.grandchild的代码

.grandChild {
    align-items: flex-end;
    display: flex;
    justify-content: flex-start;
}

一切都可以在Google中正常运行，但不能在Safari中正常运行吗？为什么？html：

<div class="parent>
  <div class="child">
    <div class="grandChild">
     text
    </div>
    <div class="grandChild">
     text
    </div>
    <div class="grandChild">
     text
    </div>
    <div class="grandChild">
     text
    </div>
    <div class="grandChild">
     text
    </div>
   </div>
   <div class="otherchild" />
 </div>

无论Safari中有多少grandChild都不会滚动，它们彼此粘在一起，但是在chrome上，一切正常吗？

Answer 1

您应该为子div添加最大高度

css

.child {
    flex: 1 1 0%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    margin-bottom: 84px;
    max-height:50px;
}