title: How to position to bottom right corner without overlapping
body: <p>How do I stop the white 'menu' div from overlapping the 'logo' div when the page is too narrow?</p>
  
  <pre><code>&lt;style&gt;
  .container {
    height: 60px;
    background: yellow;
    position: relative;
  }
  .menu {
    position: absolute;
    right:0;
    bottom:0;
    background: white;
  }
  .logo {
    width: 300px;
    height: 60px;
    background: #99cc99;
  }
  &lt;/style&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="menu"&gt;
      menu menu menu menu menu
    &lt;/div&gt;
    &lt;div class="logo"&gt;
      logo
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>See this fiddle:<br>
  <a href="https://jsfiddle.net/932tL785/1/" rel="nofollow">https://jsfiddle.net/932tL785/1/</a></p>
  
  <p>I'd like the 'menu' to wrap when there's not enough room, but to unwrap when the window is wide enough not to overlap.</p>
  
  <p>The bottom edge of the menu needs to be aligned with the bottom edge of the logo. The right edge of the menu needs to be aligned with the right edge of the container.</p>
  
  <p>The logo has a fixed width &amp; height, but I cannot rely on a specific height for the menu as it's dependent on font size.</p>