CSS width max content in safari browser

Question

I've problem when styling my homepage. I have a div that I want to set the width based on the max content inside the div. Here the code

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

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

Using width: -moz-max-content,width: -webkit-max-content; and width: -o-max-content; works well in chrome,opera and firefox. But it not working when I use safari to open the site. When I inspect the element from safari browser, it shown alert marks beside the width: -webkit-max-content; code style. It makes the width of the div same like 100%.

How can I set width: max-content in safari browser?

UPDATE

Same problem goes to width: -moz-available; and width: -webkit-fill-available; CSS code.

Answer 1

set them to display:inline-block which will adjust to the max-width of inner content

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>