title: Panes do not change size when Zoom Out in browser
body: <p>I can not figure what is wrong with my HTML so <code>jquery-ui-layout</code> library does not want to recalculate widths/heights of containers when Zooming Out in Browser (Chrome/Firefox). In my HTML all white panes are connected to each other but when I Zoom Out they get disconnected... </p>
  
  <p>I looked at official <code>jquery-ui-layout</code> demos, e.g. this one: <a href="http://layout.jquery-dev.com/demos/example.html" rel="nofollow noreferrer">http://layout.jquery-dev.com/demos/example.html</a>
  As you can see on Zoom Out elements (their inline <code>style</code> attributes) dynamically change their values. But in my code - it does not happen - values remain the same...</p>
  
  <p>Here's how sections look in my code when Zoom Out a few times in browser:</p>
  
  <p><a href="https://i.stack.imgur.com/3luYo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3luYo.png" alt="White sections get disconnected from each other"></a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.4.3/jquery.layout.min.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          body { background-color: green; }
          .xxx { height: 100vh; }
          .left { background-color: red; }
          .right { background-color: green; }
          .visible-overflow { overflow: visible !important; }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="layout-container visible-overflow"&gt;
  
      &lt;div class="xxx ui-layout-center inner-layout left"&gt;
          &lt;div class="ui-layout-center auto-overflow"&gt;&lt;/div&gt;
          &lt;div class="ui-layout-east"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-layout-east pane-selector right-side-board-panel right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var element = $('.layout-container');
      element.layout({ applyDefaultStyles: true });
      element.find('.inner-layout').layout({ applyDefaultStyles: true });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/DhQyktteFfyd5hrKxJQX?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/DhQyktteFfyd5hrKxJQX?p=preview</a></p>
  
  <p>(To see a problem please choose <em>Launch the preview in a separate window</em> in plunker and then Zoom Out in browser a few times)</p>