title: how do I resize a div based on the size of another div inside?
body: <p>I have a vertical nav "slider" that now needs to be dynamically resized based in the number of links available to the user.  I've searched all over, but all the solutions I've found haven't quite worked.  It may simply be the way I have my css working. Any time I try to change the height attribute, the whole thing goes haywire.  I'm trying to do this entirely in css.  I know it seems like it should be simple, I just can't figure it out myself.</p>
  
  <p>It's basically:</p>
  
  <pre><code>&lt;div class="slideMenu"&gt;
      &lt;ul class="nav"&gt;menu items...&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the css:</p>
  
  <pre><code>.slideMenu {
    background: #449bb5;
    width: 140px;
    height: 100%;
    padding-right: 40px;
    position: absolute;
    z-index: 3;
    -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.2);
    left: -180px;
    color: #FFFFFF;
    opacity: 100;
    transition: .4s ease-in-out;
  }
  
  .slideMenu:not(:hover) {
      transition-delay: .4s;
  }
  
  .slideMenu:hover {
    transform: translate3d(160px, 0, 0);
  }
  
  .slideMenu .nav {
    position: absolute;
    top: 30%;
    height: auto;
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(-50%);
    font-weight: 400;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/vwvwkfgb/" rel="nofollow noreferrer">JSFiddle here</a></p>