title: div height overflow in parent
body: <p>I have 2 tabs and each tab is displaying as <code>flex</code>. My need is if <code>#myTabContent</code> overflow <code>.main-panel</code> due to the list, I want a scroll bar only on the list, not on the whole <code>div</code>.<br />
  By this way, the <code>#myTabContent</code> should never overflow.</p>
  <p>Here the <a href="https://jsfiddle.net/tdbqnLf3/2/" rel="nofollow noreferrer">JSFiddle</a> with the behavior, and the following snippet:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main-panel{
    background: lightblue;
    height: 300px;
  }
  #myTabContent {
    margin: 5px;
    color: white;
    background: #0007;
  }
  #myTabContent &gt; div {
    display: none;
  }
  #myTabContent .active {
    display: flex;
    flex-flow: column;
    height: 100%;
  }
  
  .data-main {
    display: flex;
    flex-flow: row;
  }
  .data-left {
    flex: 0 1 150px;
    background: #a007;
  }
  .data-right {
    flex: 1 1 auto;
    background: #0a07;
  }
  .list-group {
    overflow-y: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;div class="main-panel"&gt;
    &lt;ul class="nav nav-tabs" id="myTab" role="tablist"&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link active" id="data-tab" data-toggle="tab" href="#data" role="tab" aria-controls="data" aria-selected="true"&gt;Data&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
        &lt;a class="nav-link" id="preview-tab" data-toggle="tab" href="#preview" role="tab" aria-controls="preview" aria-selected="false"&gt;Preview&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="tab-content" id="myTabContent"&gt;
      &lt;div class="tab-pane fade show active" id="data" role="tabpanel" aria-labelledby="data-tab"&gt;
        &lt;h3&gt;Data&lt;/h3&gt;
        &lt;div class="data-main"&gt;
          &lt;div class="data-left"&gt;
            &lt;h4&gt;Tabs&lt;/h4&gt;
            &lt;ul class="list-group"&gt;
              &lt;li class="list-group-item list-group-item-action py-1"&gt;a&lt;/li&gt;
              &lt;li class="list-group-item list-group-item-action py-1"&gt;b&lt;/li&gt;
              &lt;li class="list-group-item list-group-item-action py-1"&gt;c&lt;/li&gt;
              &lt;li class="list-group-item list-group-item-action py-1"&gt;d&lt;/li&gt;
              &lt;li class="list-group-item list-group-item-action py-1"&gt;e&lt;/li&gt;
              &lt;li class="list-group-item list-group-item-action py-1"&gt;f&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="data-right"&gt;
            &lt;h4&gt;Sections&lt;/h4&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane fade" id="preview" role="tabpanel" aria-labelledby="preview-tab"&gt;
        &lt;h3&gt;Preview&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>