title: CSS width max content in safari browser
body: <p>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</p>
  
  <pre><code>&lt;div class="head"&gt;
      &lt;div class="time"&gt;&lt;/div&gt;
      &lt;div class="logo"&gt;&lt;/div&gt;
      &lt;div class="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;Home&lt;/li&gt;
              &lt;li&gt;Profile&lt;/li&gt;
              &lt;li&gt;Gallery&lt;/li&gt;
              &lt;li&gt;Location&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Using <code>width: -moz-max-content</code>,<code>width: -webkit-max-content;</code> and <code>width: -o-max-content;</code> 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 <code>width: -webkit-max-content;</code> code style. It makes the width of the div same like 100%.</p>
  
  <p>How can I set <code>width: max-content</code> in safari browser?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Same problem goes to <code>width: -moz-available;</code> and <code>width: -webkit-fill-available;</code> CSS code.</p>