How to create a scrollable nested div that adjusts to page size changes

demo

I've put in some effort, but I'm stuck on this css problem. There are 4 nested divs in total, with the innermost child div containing a table of rows.

Here is the HTML structure:

 div class="moduleContentContainer">
 <div id="dash-board-container">
 <div class="dash-board-item">
     <div class=".quote_list_container">
         <table>
             <tr><td>ssss</td></tr>
               <tr><td>ssss</td></tr>
            ...
         <table>
     </div>
</div>

(1) The goal is to have the dash_Board_Item Div adjust its height based on the content inside the .quote_list_container div. This means it should be shorter if there is less content and taller if there is more.

(2) Additionally, when the window is resized, I want a scroll bar to appear on the .quote_list_container div when necessary.

Ray

htmlcss

Answer №1

At first, there seems to be an error in your HTML code: 

div class=".quote_list_container"
where the leading period . should be removed from the class name.

Secondly, because the content element is nested within multiple elements, using max-height with percentage values may cause issues as you would need to specify explicit heights for the parent elements.

To solve this, you can utilize the vh viewport percentage unit:

Check out this Example

.quote_list_container {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
}

This is specified by W3C:

vh unit
Equivalent to 1% of the height of the initial containing block.

Note that the vh viewport relative length is compatible with IE9 onwards.

Answer №2

Here is my solution to your issue, along with an example:

.quote_list_container {
color: #6e6e6e;
font-family: arial;
font-size: 14px;
overflow-y: auto;
overflow-x: hidden;
/* position: relative; */
max-height: 91%;
}

.dash-board-item {
margin-right: 20px;
display: inline-block;
border-style: solid;
max-width: 700px;
min-width: 300px;
border-color: #999999;
border-width: 1px;
/* box-shadow: 0px 0px 1px rgb(109,109,110); */
/* float: left; */
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
position: relative;
    height: 100%;
        overflow: auto;
    
}

#dash-board-container {
position: absolute;
height: 90%;
}

.moduleContentContainer {
width: 100%;
}
<div class="moduleContentContainer">
<div id="dash-board-container">
     <div class="dash-board-item">
         <div class=".quote_list_container">
             <table>
                 <tr><td>ssss</td></tr>
                   <tr><td>ssss</td></tr>
                 <tr><td>ssss</td></tr>
                 <tr><td>ssss</td></tr>
                 <tr><td>ssss</td></tr>
                 <tr><td>ssss</td></tr>
                 <tr><td>ssss</td></tr>
                 <tr><td>ssggggss</td></tr>
                 
             <table>
         </div>
    </div>
</div>
</div>

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

The ideal method for eliminating a targeted border in HTML

I need to make a table more visually attractive by removing specific borders without affecting the overall design. After applying the border-collapse property, I attempted to remove the right border from certain cells using CSS. However, this unintentional ...

htmlcsshtml-table

Opacity error with jQuery slider specifically affecting Google Chrome browser

My Magento site features a custom-built slider that is both responsive and has unique touch behavior. The desired behavior for the slider is as follows: A three-image slider where the middle image has an opacity of 1.0, while the other two images have an ...

javascriptjqueryhtmlcssgoogle-chrome

Welcome to the NGINX Default Landing Page

In my NGINX server, the index page is located in subfolders rather than at the root of the site (e.g. /root/pages/htmls/index.html). How can I configure index.html to be the default webpage for the site? ...

nginxdefaulthtml

issues with compass importing images

I'm struggling to understand how the directory structure functions. The setup I have is as follows: --compass --css --images --frontSprite Images -sass --_base.scss --advertiser.scss config.rb When ...

cssrubysasscompass-sass

Tips for showcasing elements individually in JavaScript when a button is clicked and halting on a random element

I have some names stored in h3 tags. I want to highlight one name at a time when I click a button, stopping at a random name. <div class="all-names"> <h3 class="name-one"><span class="line">Name ...

javascripthtmlfunctioniterator

The sequence of loading styles is respected, yet Bootstrap continues to take precedence over the WordPress child

After putting together a WordPress child theme that correctly displays Bootstrap and child-styles.css in the source code, I encountered an issue: View Source Code Stylesheet Order Upon inspecting with Chrome, it's apparent that the color of my link ...

htmlcsswordpresstwitter-bootstrapbootstrap-4

Create a dynamic design with Angular Material's mat-drawer at full height using flexbox, allowing content

Yesterday, I encountered an interesting CSS problem involving the mat-drawer and Angular's router-outlet. My layout consists of a full-page flexbox with two children: a mat-toolbar at the top, and a custom component called app-sidenav at the bottom. T ...

cssangularflexboxangular-materialangular-router

Position two div elements evenly with text enclosed in a container

I'm looking to incorporate two distinct blocks of text into a container https://i.stack.imgur.com/6mFZK.png Criteria: Text 1: positioned at the top left corner (85% of box size) Text 2: positioned at the bottom right corner (15% of box size) I&ap ...

htmlcsstext-alignment

Convert JSON data into an HTML table with custom styling

If you have a set of JSON data that you want to convert into an HTML table, you can use the following code: $.each(data, function(key, val) { var tr=$('<tr></tr>'); $.each(val, function(k, v){ $('<td>' ...

javascriptjqueryhtmljsonhtml-table

Is it possible to hide a fixed header on scroll in a mobile device?

I am facing an issue with my Wordpress site where I want the header to hide when the user scrolls. Despite trying various codes, I have been unable to make it work. The reason for wanting to hide the header is that on mobile devices, it causes scroll prob ...

javascriptcsswordpressjquery-mobile

Changing the color of a tooltip for a specific element using Bootstrap 4

Is there a way to customize the tooltip background-color for icons with the classes "alert-danger" to red and "alert-success" to green using the following CSS commands: .alert-danger + .tooltip > .tooltip-inner { background-color: red !important; } ...

javascriptjqueryhtmlcsstooltip

Suddenly, the Bootstrap CSS appears to have ceased functioning

Here are some of the questions I've already checked out: Bootstrap JavaScript not functioning Twitter Bootstrap dropdown suddenly not operational Comprehensive list of possible issues causing a CSS file to fail All of a sudden, my Bootstrap sty ...

javascriptcssasp.net-mvctwitter-bootstraptwitter-bootstrap-4

Using scope in ng-style to manipulate a portion of a CSS property value in Angular

I've been attempting to add a border using ng-style, but I'm struggling to figure out how to concatenate the value from the scope variable. None of the methods below seem to be working for me: <div ng-style="{'border-top' :'1p ...

javascriptcssangularjs

Having trouble with my PDO insert query functionality

I've been trying to input the data from my form into the database, but unfortunately, my current code doesn't seem to be working. I followed some tutorials on YouTube for this particular project, and despite following them closely, the data I ent ...

phphtmlpdo

The target element is out of reach for the Puppeteer selector

When trying to extract the source of multiple images, I encountered an issue with the selectors not working properly. It seems like the elements are fake or not actually present on the page. Every page contains one of the desired elements (the main image) ...

javascripthtmlweb-scrapingpuppeteerscreen-scraping

What could be causing my webGL page to fail loading the second time following a refresh?

My friend and I are working on a JavaScript page together. Initially, the page loads smoothly when opened in a tab, although it may be a bit slow. However, upon refreshing the tab, the WebGl canvas appears completely blank while the HTML elements are stil ...

javascripthtmlsvg

Tips for scrolling content within a flex row that has a flex-grow-1 property

I am working on a Bootstrap layout where there are 3 rows wrapped in a flex column. Here is how it looks: <div class="row" style="height:100vh;"> <div class="col d-flex flex-column"> <div class="row">...</div> <div c ...

cssbootstrap-4flexbox

Load elements beforehand without displaying them using a div

In order to efficiently manipulate my Elements using jQuery and other methods, I am exploring the idea of preloading them all first. One approach I have considered is creating a div with CSS display set to none, and placing all the elements I need for my w ...

javascriptjqueryhtml

What is the best way to adjust the position of the left-aligned button on an HTML table so that it

https://i.sstatic.net/DIIsv.png I'm working with HTML code that has tables wrapped around with Divs using Bootstrap. The issue I'm facing is that the "Sold By" Table is not aligned with the rest of the content and I want to move it more towards ...

htmlcssbootstrap-4

ag-Grid incorporating new style elements

For my Angular application, I have a simple requirement of adding a CSS class when a row expands or collapses to highlight the row. I attempted to use gridOptions.getRowClass following the documentation at https://www.ag-grid.com/javascript-grid-row-styles ...

javascripthtmlcssangularag-grid