div height overflow in parent

Question

I have 2 tabs and each tab is displaying as flex. My need is if #myTabContent overflow .main-panel due to the list, I want a scroll bar only on the list, not on the whole div.
By this way, the #myTabContent should never overflow.

Here the JSFiddle with the behavior, and the following snippet:

.main-panel{
  background: lightblue;
  height: 300px;
}
#myTabContent {
  margin: 5px;
  color: white;
  background: #0007;
}
#myTabContent > 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;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<div class="main-panel">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="data-tab" data-toggle="tab" href="#data" role="tab" aria-controls="data" aria-selected="true">Data</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="preview-tab" data-toggle="tab" href="#preview" role="tab" aria-controls="preview" aria-selected="false">Preview</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="data" role="tabpanel" aria-labelledby="data-tab">
      <h3>Data</h3>
      <div class="data-main">
        <div class="data-left">
          <h4>Tabs</h4>
          <ul class="list-group">
            <li class="list-group-item list-group-item-action py-1">a</li>
            <li class="list-group-item list-group-item-action py-1">b</li>
            <li class="list-group-item list-group-item-action py-1">c</li>
            <li class="list-group-item list-group-item-action py-1">d</li>
            <li class="list-group-item list-group-item-action py-1">e</li>
            <li class="list-group-item list-group-item-action py-1">f</li>
          </ul>
        </div>
        <div class="data-right">
          <h4>Sections</h4>
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="preview" role="tabpanel" aria-labelledby="preview-tab">
      <h3>Preview</h3>
    </div>
  </div>
</div>

Add 3 lines of code to your CSS. https://jsfiddle.net/2cnaw0L1/ — Michael Benjamin, Jun 23 '21 at 20:09
@MichaelBenjamin, Thank you for the help, but in the best case I would like to add the scrollbar only to the list — thibsc, Jun 23 '21 at 20:11
Ah, got it. Just a couple more lines. https://jsfiddle.net/0cgpfrtk/ — Michael Benjamin, Jun 23 '21 at 20:19
@MichaelBenjamin, thank you very much, with you example, I applied only on the list :) — thibsc, Jun 25 '21 at 15:49

score 0 · Answer 1 · answered Jun 23 '21 at 19:56

0

Can't you simply set the parent container to have this property?:

height: fit-content

This should always force your parent container to be as high as the child is.

answered Jun 23 '21 at 19:56

Fullbringa

49
10

My problem is the opposite, I don't want the child div overflow my parent div – thibsc Jun 23 '21 at 20:06

div height overflow in parent

1 Answers1