div height overflow in parent [duplicate] - html

Question

This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 1 year ago.
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>

Answer 1

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.