parent div with overflowing height

I am working with 2 tabs, each displayed as flex. My goal is to have a scroll bar appear only on the list within #myTabContent if it overflows .main-panel due to the content, rather than having a scroll bar on the entire div. This way, #myTabContent should never overflow.

You can view the behavior in this JSFiddle, along with the accompanying 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>

htmlcssbootstrap-4flexbox

Answer №1

Why not just apply the following style to the parent container?:

height: fit-content

Doing this will ensure that the parent container always matches the height of its child element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a visual that when clicked, reveals an enlarged version at a different location

Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect? Image not hovered: ht ...

htmlcssimagehover

How to eliminate the gap below a CSS element by adjusting the top value

https://i.stack.imgur.com/Sn6Wx.png The three 'Replacement Options' sections are contained within a div with the class relative. The relevant CSS properties have been applied as shown below: .relative { top: -10rem; position: relative; ...

htmlcss

Divs gracefully appear one after the other in a sequential manner

I am attempting to showcase a sequence of 4 divs in a row using the ease-in CSS transition feature. I came across this example that demonstrates what I am aiming for: http://jsfiddle.net/57uGQ/enter code here. However, despite my best efforts, I am unable ...

htmlcsscss-transitions

Update: Explored 0 web pages (at a rate of 0 pages per minute) and obtained information from 0 elements (at a rate of

I'm a beginner in Python and Scrapy, currently working on my first project to crawl web security information from a website. However, when I try to run it using cmd, I encounter the message "Crawled 0 pages (at 0 pages/min), scraped 0 items (at 0 item ...

pythoncssscrapyweb-crawler

Can you restrict the selection of text to only the current element?

<div class="container"> <div class="item1">text text text in div element 1</div> <div class="item2">text text text in div element 2</div> </div> Is there a way using HTML nodes, CSS, or JavaScript to restrict the select ...

javascripthtmlcss

Struggling with a minor glitch in a straightforward coin toss program written in JavaScript

I'm a newcomer to JavaScript programming and I am struggling with understanding how the execution flow is managed. I attempted to integrate an animation from "Animation.css" into a coin toss program, but encountered an issue. When trying to use JavaSc ...

javascripthtmlcsscss-animations

Customizing Material-UI styles with type overrides

Is there a way to change the MuiIconButton-root class when using MuiSvgIcon with the fontSizeSmall attribute? import React from 'react' import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; const theme = createMuiT ...

cssreactjsstylesmaterial-ui

Setting up conditional select options in Angular

I need to create a select list with specific options based on the data in an object. For instance, if the data property is 0, I want to display an option as 0 with the ability to switch to 1, and vice versa. However, when rendered in HTML, no option value ...

htmlangularselecthtml-select

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

htmlcssflexbox

CSS is being affected by an HTML form's unintended margin

Something seems off with the alignment of my search bar. It's causing the horizontal line to shift down when I add it next to the vertical lines at the bottom. I've tried adjusting the padding, margins, and even played with positive and negative ...

htmlcss

It is not possible to apply a background color to an HTML element located outside of the App.Vue

Hey there, thanks for taking the time to read my query! I am interested in adding a gradient background color to a specific page on my Vue application. I tried applying the following code in components/Frontpage.Vue: html { background: linear-gradient( ...

cssvue.jsvuejs2vue-component

"Utilizing a hidden overflow combined with border-radius and translate3d for a

Is there a way to keep the corners of a block hidden when it has both overflow set to hidden and border radius applied while being translated? HTML <div class="scroller"> <div class="scroller-content"></div> </div> CSS .s ...

htmlcss

When using the `sendFile` method in Node.js Express, you will notice that the HTML content

Hey there, I'm new to nodejs and trying to create a simple website with two pages. I'm facing an issue where the content of the second file is being rendered as the first one, even though the source inspector in the browser indicates that it&apos ...

javascripthtmlnode.jsexpressfrontend

PHP code that generates a drop-down list using a foreach iteration

all I'm encountering a slight issue with trying to create a dynamic drop down list. Here's the code I've written: <select name='categoryID' > <?php foreach( $categories as $category)?> <option value="<?p ...

phphtml

Adjust the size of every card in a row when one card is resized

At the top of the page, I have four cards that are visible. Each card's height adjusts based on its content and will resize when the window size is changed. My goal is to ensure that all cards in the same row have equal heights. To see a demo, visit: ...

javascriptjquerycssangular

Facing difficulties in retrieving my static files with Express and Node.js

I'm puzzled as to why express isn't able to access my static file to display my CSS. Here is the code snippet from express.js: app.use(express.static(__dirname + '/public')); Contents of style.css: <style type="text/css"> bod ...

cssnode.jsexpress

Dynamically generated table causing issues with Jquery functionality

Currently, I am facing an issue with my webpage that utilizes the jquery template plugin for dynamically loading data into a table via a json call on page load. My goal is to include clickable elements like buttons or divs within the table columns, which w ...

jqueryhtmlajax

Is it possible to translate the content of the page into English and French simply by clicking on the designated buttons?

As I dive into working with knockout, I am still in the learning process. Currently, I have a dropdown code where selecting English translates the entire page to English and selecting French translates it to French without any issue. I believe this functio ...

javascripthtmlknockout.jsdata-bindinginternationalization

How to perfectly align an element within a div using Bootstrap

Utilizing bootstrap here. Currently trying to center the h1 element within the div, but so far I have been unsuccessful. It consistently remains aligned to the left. Attempts have included using bootstrap's center-block helper class, as well as the fl ...

htmlcsstwitter-bootstrap

Executing a function should be delayed until all necessary information is obtained from the REST Api

I want to create a chart showing data for each month over the course of 12 months. The data for each month will be retrieved from a REST API. Here is my approach: $.getJSON(link, function(data){ // store data in a variable } Repeat this process 12 t ...

javascripthtmlcanvasonloadcanvasjs