title: Safari horizontal scroll
body: <p>My problem happens on large desktop screen.</p>
  <p>You can have a sample of the problem right here ==&gt; <a href="http://www.pricebreak.it/#!explore/Sports-et-loisirs/17-AB-Prince-Pro-Banc-a-abdominaux" rel="nofollow noreferrer">http://www.pricebreak.it/#!explore/Sports-et-loisirs/17-AB-Prince-Pro-Banc-a-abdominaux</a></p>
  <p>Site is in two parts.</p>
  <p>The left panel for the menu, CSS is :</p>
  <pre><code>#panel-structure{
      position:fixed;
      top:0px; 
      left:0px;
      width:300px;
      height:100%;
      min-height:100%;
      z-index:15;
      background-color:#FFF;
      text-align:center;
  }
  </code></pre>
  <p>and a container on the right :</p>
  <pre><code>#content-structure{
      margin:0 0 0 300px;
      display:block;
      overflow: auto;
      /*position: relative;
      top:0; left:300px;*/
      height:0px;
      width: -moz-calc(100% - 310px);
      width: -webkit-calc(100% - 310px);
      width: -o-calc(100% - 310px);
      width: calc(100% - 310px);
  }
  </code></pre>
  <p>It might be useful to have the body css also:</p>
  <pre><code>body{
      line-height:160%;
      font-family:Arial, Helvetica, sans-serif;
      font:Arial, Helvetica, sans-serif;
      width: 100%; max-width: 100%;
      overflow: hidden;
      /*height:100%;
      max-height:100%;*/
  }
  </code></pre>
  <p>The jQuery plugin mCustomScroll bar deal with the VERTICAL scroll.</p>
  <p>If you open the previous link in Chrome, Opera, Firefox you'll see the vertical scrollbar on your screen and you will NOT have horizontal scroll. Perfect :)</p>
  <p>If you open in Safari, you will not see the vertical scrollbar because you have to scroll horizontally to see it...</p>
  <p>I'm struggling with this for hours now...</p>
  <p>I tried to console the width and, for example, if body.outerWidth is 1500 then I'll have the panel.outerWidth to 300 and content.outerWidth to 1200.</p>
  <p>I just DON'T understand why Safari add some horizontal scroll...</p>
  <p>Any help would be welcome ! Thanks a lot !</p>
  <h1>Edit 08/28:</h1>
  <p>I tried to change #content-structure to :</p>
  <pre><code>#content-structure{
      /*margin:0 0 0 300px;
      display:block;
      overflow: auto;*/
      position: fixed;
      top:0px;
      left:300px;
      /*position: relative;
      top:0; left:300px;*/
      height:100%;
      min-height:100%;
      width: -moz-calc(100% - 310px);
      width: -webkit-calc(100% - 310px);
      width: -o-calc(100% - 310px);
      width: calc(100% - 310px);
      max-width: -moz-calc(100% - 310px);
      max-width: -webkit-calc(100% - 310px);
      max-width: -o-calc(100% - 310px);
      max-width: calc(100% - 310px);
  }
  </code></pre>
  <p>but still this scroll...</p>