Safari浏览器中的CSS宽度最大内容

Question

我在设计主页时遇到问题。我有一个 div，我想根据 div 内的最大内容设置宽度。这里的代码

<div class="head">
    <div class="time"></div>
    <div class="logo"></div>
    <div class="menu">
        <ul>
            <li>Home</li>
            <li>Profile</li>
            <li>Gallery</li>
            <li>Location</li>
        </ul>
    </div>
</div>

和CSS：

.head{
    position:relative;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    margin: 0px auto;
}
.time{
    position:absolute;
    width:150px;
    height:50px;
    left:0px;
    top:10px;
}
.logo{
    position: absolute;
    left:0;
    top:0;
    margin:0px auto;
    width:450px;
    height: 200px;
    z-index: -1;
}
.menu{
    position: absolute;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    height: 25px;
    text-align: center;
    top: 210px;
}

使用width: -moz-max-content,width: -webkit-max-content;并且width: -o-max-content;在 chrome、opera 和 firefox 中运行良好。但是当我使用 safari 打开网站时它不起作用。当我从 safari 浏览器检查元素时，它在width: -webkit-max-content;代码样式旁边显示了警报标记。它使 div 的宽度与 100% 相同。

如何width: max-content在 safari 浏览器中设置？

更新

同样的问题去width: -moz-available;和width: -webkit-fill-available;CSS代码。

Answer 1

将它们设置为display:inline-block将适应max-width内部内容的

div {
  border: 1px dotted grey;
  margin: 10px 0;
  text-align: left;
}
div.inlineblock {
  display: inline-block;
}
.align {
  text-align: right
}

<div>
  <p>testing test</p>
</div>

<div class="align">
  <div class="inlineblock">
    <p>testing testing test</p>
    <p>testing testing</p>
  </div>
</div>