关于flex布局的一个兼容性问题(Safari和chrome以及ff)

Question

关于flex布局的问题，我先给出代码：

 <style>
        .flexb1{
            width: 800px;
            height: 200px;
            display: flex;
            flex-direction: column;
            background-color: #ccc;
        }
        p,div{
            margin: auto;
            width: min-content
        }
        .flexb2{
            width: 800px;
            height: 200px;
            display: flex;
            flex-direction: column;
            background-color: #fee;
        }
</style>

<div class="flexb1">
    <p>this is a test paragraph</p>
</div>

<div class="flexb2">
    <div>this is a test paragraph2</div>
</div>

这段代码在ff和chrome下的表现是这样的：

然而，在Safari下是这样的：

我经过观察后发现应该是因为safari的p(换成div也一样)并没有根据内容而适应，导致宽度默认整列。

于是我给p的样式和div的样式增加了一行这个：

width: -webkit-min-content;

然而Safari下却变成这个样子...:

晕...这个64px是怎么出来的并不知道。有没有朋友能帮忙解释一下这个问题?..谢谢

Answer 1

经过尝试

width: -webkit-min-content;

变成

width: -webkit-max-content;

可以解决问题。

参考链接：http://www.zhangxinxu.com/wor...