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

What is the reason behind both paragraphs being displayed in a shade of blue in this snippet of code

What is the best way to prioritize List Items over menu items in the front?

Incorporate a genre twist in animated films

JavaScript may fail to execute properly if the <!doctype html> declaration is not inserted in the correct syntax

Guide on creating a stationary side navigation bar in HTML with Bootstrap 5 and CSS

Profile picture placeholder with conditional logic

The v-bind class feature is failing to update the CSS on the object's properties

Executing a nested function as an Onclick event in an HTML document

Implementing change event to activate select dropdown with jQuery

Does ng-bind have the ability to function with input elements too?

Tips for incorporating circumflex accent in an HTML textarea

Switch up the placement of articles, going back and forth between left

Create unique identifiers for the TD elements of Viz.js that will be displayed within the SVG elements

Arranging Bootstrap 4 columns in a vertical stack

Create a stylish navigation dropdown with MaterializeCSS

Having trouble dividing an HTML file?

Correcting the reference to "/" (root) for assets after relocating the site to a subdirectory

sidebar that appears upon the initial page load

Methods like jQuery blink(), strike(), and bold() offer dynamic ways to manipulate

Tips for customizing the appearance of material-ui SelectField