嵌套的 flexbox 在 Safari 10.1.2 中不起作用答案

【问题标题】：Nested flexbox not working in Safari 10.1.2嵌套的 flexbox 在 Safari 10.1.2 中不起作用
【发布时间】：2018-04-09 20:32:01
【问题描述】：

我有一些嵌套的 flexbox 布局，它们在 Chrome 和 Safari 11+ 中完美运行，但在 Safari 10.1.2 中表现不正确

在 Chrome 中 - 它看起来像预期的那样：

Chrome behaviour

但是在 Safari 10.1.2 中：

Safari behaviour

有人可以帮我弄清楚如何解决吗？谢谢！

这是我的（稍微简化的）HTML：

<div class="content-canvas">
    <div class="horizontal-section" id="blog">
        <h1>Blog</h1>
        <div id="divRss">
            <ul class="feedEkList">
                <li>
                    <div class="itemTitle"><a href="#</a></div>
                    <div class="itemDate">10/16/2017</div>
                    <div class="itemContent">Some text</div>
               </li>
               <li>
                   As above
               </li>
            </ul>
        </div>
        <a href="##" target="_blank">Read more</a>
    </div>
    <div class="horizontal-section" id="upcoming">
    ...
    </div>
</div>

还有我的 CSS：

.content-canvas {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-grow: 2;
    -o-flex-grow: 2;
    flex-grow: 2;
}

#blog,
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
 }

#divRss,
{
    padding: 10px;
    height: 0;
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-grow: 2;
    -o-flex-grow: 2;
    flex-grow: 2;
}

.feedEkList,
{
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    justify-content: space-around;
}

.feedEkList li,
 {
    height: 0;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-grow: 1;
    -o-flex-grow: 1;
    flex-grow: 1;
}

【问题讨论】：

首先，你在几个规则中有一个孤立的逗号，删除那些。
如果您从 #divRss 中删除 height: 0 并将 display: flex 添加到其中，然后从 .feedEkList 规则中删除 height: 100% 它应该可以工作...
...并从.feedEkList li 中删除height: 0 以及
如果您需要更多帮助，请制作一个最小的工作代码 sn-p 以便我们可以实际看到您遇到的问题，因为现在发布的代码片段不会呈现任何接近图像中显示的内容
这成功了！感谢您的帮助！

标签： css safari flexbox

【解决方案1】：

我个人在 Safari 上遇到了一个问题，当我的上部 flexbox 的内容超过其高度的 100% 时，嵌套的 flexbox 的高度缩小到了 1px。

我通过在嵌套的 flexbox 上设置 flexbox-shrink: 0 来修复它。

【讨论】：

它的flex-shrink: 0; 非常适合我，谢谢！
我很高兴它有帮助:)