I'm looking to create a parent div that adjusts its size dynamically and can contain two child divs, each with variable sizes that can scroll independently. How can I achieve this?

Question

I'm looking to create a parent div that adjusts its size dynamically and can contain two child divs, each with variable sizes that can scroll independently. How can I achieve this?

Consider this layout configuration:

<div id="PARENT_DIV">
    <div id="LEFT_CHILD_DIV">

    </div>
    <div id="RIGHT_CHILD_DIV">

    </div>
</div>

Key features for PARENT_DIV:

PARENT_DIV must have a higher z-index than all other GUI elements.
PARENT_DIV should dynamically expand in width and height based on the sizes of LEFT_CHILD_DIV and RIGHT_CHILD_DIV. There should be limits set using max-width and max-height properties. For vertical expansion, it should match the taller child div (up to max-height), with the other child floating to the top.
The positioning of PARENT_DIV on the screen should be customizable through various methods like setting top and left values, percentages, or transformations.

Guidelines for LEFT_CHILD_DIV and RIGHT_CHILD_DIV:

LEFT_CHILD_DIV and RIGHT_CHILD_DIV should expand horizontally and vertically based on their content, following max-width and max-height restrictions set independently for each.
They should always appear side by side, regardless of their maximum widths.
If they reach the maximum height limit imposed either by max-height rules or the parent's max-height, vertical scrolling should activate to accommodate the overflowing content.

Refer to this visual mock-up for clarity on the desired layout. Despite trying various CSS combinations involving display, overflow, box-sizing, position, etc., I haven't found a single tutorial covering all requirements. Seeking insights on achieving these goals purely through CSS without resorting to JavaScript solutions.

While I can achieve this with JavaScript, preference is to explore a script-free CSS approach.

css html

Answer 1

Answer №1

To implement a flexbox layout, follow these steps:

#PARENT_CONTAINER {
  position:absolute;
  top:50px;
  left:150px;
  border: 1px solid red;
  display: inline-flex;
  max-height: 200px;
  max-width: 300px;
  align-items: flex-start;
}

#LEFT_CHILD_DIV {
  border: 1px solid green;
  max-width: 180px;
  max-height: 100px;
  overflow: auto;
}

#LEFT_CHILD_DIV>div {
  height: 200px;
  width:200px;
  background:rgba(0,0,0,0.5);
  animation:change 2s infinite alternate linear;
}

#RIGHT_CHILD_DIV {
  border: 1px solid orange;
  max-width: 80px;
  max-height: 50px;
  overflow: auto;
}

#RIGHT_CHILD_DIV>div {
  width: 200px;
  height:300px;
  background:rgba(0,0,0,0.5);
  animation:change 2s 1s infinite alternate linear;
}

@keyframes change{
  to{width:5px;height:20px;}
}

<div id="PARENT_CONTAINER">
  <div id="LEFT_CHILD_DIV">
    <div></div>
  </div>
  <div id="RIGHT_CHILD_DIV">
    <div></div>
  </div>
</div>

Answer 2

To implement a flexbox layout, follow these steps:

#PARENT_CONTAINER {
  position:absolute;
  top:50px;
  left:150px;
  border: 1px solid red;
  display: inline-flex;
  max-height: 200px;
  max-width: 300px;
  align-items: flex-start;
}

#LEFT_CHILD_DIV {
  border: 1px solid green;
  max-width: 180px;
  max-height: 100px;
  overflow: auto;
}

#LEFT_CHILD_DIV>div {
  height: 200px;
  width:200px;
  background:rgba(0,0,0,0.5);
  animation:change 2s infinite alternate linear;
}

#RIGHT_CHILD_DIV {
  border: 1px solid orange;
  max-width: 80px;
  max-height: 50px;
  overflow: auto;
}

#RIGHT_CHILD_DIV>div {
  width: 200px;
  height:300px;
  background:rgba(0,0,0,0.5);
  animation:change 2s 1s infinite alternate linear;
}

@keyframes change{
  to{width:5px;height:20px;}
}

<div id="PARENT_CONTAINER">
  <div id="LEFT_CHILD_DIV">
    <div></div>
  </div>
  <div id="RIGHT_CHILD_DIV">
    <div></div>
  </div>
</div>

I'm looking to create a parent div that adjusts its size dynamically and can contain two child divs, each with variable sizes that can scroll independently. How can I achieve this?

Answer №1

Similar questions

Button placed within a jade table cell

During the click event, two distinct $.ajax requests interfere and cancel each other out

"Utilize Ajax to load PHP content and dynamically refresh a specific div

Steps for properly inserting a hyperlink:

Steps for displaying an HTML table in Excel by clicking on a button

Obtain data attributes using JQuery's click event handler

Retrieve webpage using HTML stored in web storage

Vanishing Span in CSS3 Flexboxes

My efforts to resolve the issues in my code have been ongoing, but unfortunately, I have been unable to find a solution

Incorporate CSS and JavaScript files into every page of NetSuite

Is it possible to modify a scss style in Prestashop?

Employing AJAX to send form data to a pair of destinations

Forming a header area by utilizing a 960 Grid container

Having trouble with jQuery Animate when trying to change the background-color property?

Utilizing the onCLICK event handler with numerous parameters

Stop the span within the paragraph from breaking onto a new line

Learn how to call class methods using jQuery events by utilizing the on() method

The content contained within the .each loop within the click event is only executed a single time

The discrepancy between the heights of a div using Jquery and JavaScript

The issue of checkboxes not being sorted properly in Slick Grid