flex: 1 не прокручивается на сафари?

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;
}

все отлично работает в гугле, но не в сафари? Почему? 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>

независимо от того, сколько grandChild в сафари не будет прокручиваться, они застряли друг на друге, но на chrome все в порядке?

Answer 1

Вы должны добавить max-height для дочернего элемента 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;
}