title: max-height 100% overflowing parent
body: <p>I have a list-group using bootstrap, with a lot of items in it. I applied the following css rules to the id of my list-group div.</p>
  
  <pre><code>#my-listgroup {
      margin-top: 20px;
      border-radius: 6px;
      overflow-y: scroll;
      max-height: 100%;
      max-width: 100%;
      width: auto;
      height: auto;
  }
  </code></pre>
  
  <p>Now this div is wrapped in a couple of other divs, as shown below.</p>
  
  <p><a href="https://i.stack.imgur.com/QxS65.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QxS65.png" alt="markup of my issue."></a></p>
  
  <p>how do I make my listgroup not overflow my #body-content-menu div who has the following css rules, while still allowing this to be responsive.</p>
  
  <pre><code>#body-content-menu {
      border-radius: 10px;
      height: 100%;
      background-color: #B21E15;
      padding-bottom: 20px;
  }
  </code></pre>