flex: 1 不在 safari 上滚动？答案

【问题标题】：flex: 1 not scrolling on safari?flex: 1 不在 safari 上滚动？
【发布时间】：2020-05-07 08:42:37
【问题描述】：

我有这个代码：

.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 上一切正常吗？

【问题讨论】：

也请分享html
会检查让你知道
你应该添加 grandChild 也 ooverflow-y: scroll;
孩子是我想要滚动的那个，但它不适用于 safari
我遇到了类似的错误，对我来说问题是flex: 1 1 0%。此问题仅存在于 Opera 和 Safari。我用flex: 1 1 auto 进行了更改，并且效果很好。希望它可以帮助！ :)

标签： html css safari flexbox

【解决方案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;
}

【讨论】：