Expand the height of the parent container as additional child elements are included

I'm facing a layout issue with a parent div and multiple child divs. Currently, the child divs are evenly spaced within the parent div, which works fine. However, I want the parent div to expand in height as more child divs are added, while keeping the height of the child divs constant. How can I achieve this? Currently, when new child divs are added, the parent div remains the same height and the child divs shrink to fit, but I want the opposite. I want the parent div to automatically adjust its height. Any guidance on how to accomplish this would be greatly appreciated. Thank you.

.items {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 6%;
  left: 15%;
  width: 70%;
  height: 60%;
  background-color: gold;
}

.data {
  width: 100%;
  height: 35%;
  background-color: #187bcd;
  border-top: 2px solid #000000;
}
<div class="items">
  <div class="data">

  </div>
  <div class="data">

  </div>
  <div class="data">

  </div>
  <div class="data">

  </div>
</div>

javascripthtmljquerycss

Answer №1

To improve the layout, try removing the percentage height from the .items div and instead, specify a fixed height for its child elements.

<button>Add div</button>
<div class="items">
    <div class="data"></div>
    <div class="data"></div>
</div>

<style>
    .items {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        top: 6%;
        left: 15%;
        width: 70%;
        background-color: gold;
    }

    .data {
        width: 100%;
        height: 75px; /* Set a fixed height here */
        background-color: #187bcd;
        border-top: 2px solid #000000;
    }
</style>

<script>
    const button = document.querySelector('button');
    const div = document.querySelector('div.items');

    button.addEventListener('click', () => {
        const newDiv = document.createElement('div');
        newDiv.className = 'data';
        div.appendChild(newDiv);
    });
</script>

Answer №2

If you prefer, you can utilize a non-parental length unit (such as em and px) to achieve this:

.elements {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 6%;
  left: 15%;
  width: 70%;
  background-color: gold;
}

.info {
  width: 100%;
  height: 2em;
  background-color: #187bcd;
  border-top: 2px solid #000000;
}
<div class="elements">
  <div class="info">

  </div>
  <div class="info">

  </div>
  <div class="info">

  </div>
  <div class="info">

  </div>
    <div class="info">

  </div>
  <div class="info">

  </div>
  <div class="info">

  </div>
  <div class="info">

  </div>
</div>

Answer №3

The minimum height should be equal to or less than the height of the 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

Incorporated React component from Rails-assets.org into a Rails application

I have been trying to incorporate a react component from rails-assets.org into my Rails application. Currently, I am using the react-rails gem to write react view in my application. Now, I want to use other react components such as react-router, react-sel ...

javascriptruby-on-railsreactjsrubygemsreact-rails

MVC constructs the HTML page but fails to display it

I am facing an issue with Asp.net MVC. On my Index.cshtml page, I have the following Javascript code: $('#employeeTable tbody').on('dblclick', 'tr', function() { var employeeId = table.row(this).data().Id; ...

javascriptc#htmlasp.net-mvc

using a JSON object as a parameter in a JavaScript function

I am trying to pass specific elements from a JSON object as arguments in a JavaScript function. Here is the script I am using: if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp1=new XMLHttpRequest(); } else {// code ...

javascriptjsonobjectparameter-passing

Retrieve the country ID based on the country name using ReactJS

I am looking to retrieve the country ID of a specific country name from a list of countries with IDs. export const country_list_with_id = [ { id: 1, code: "AF", name: "Afghanistan" }, { id: 2, code: "AL" ...

javascriptreactjsdata-structures

Manipulate the value of the <input> element when focused through JavaScript

After I focus on the input field, I was expecting to see Bond-Patterson, but instead, I am only getting Bond. What could be causing this discrepancy and how can it be fixed? $('input[name="surname"]').attr("onfocus", "this.placeholder='Bo ...

javascriptjqueryhtml

The var_dump($_POST) function is not displaying any results after submitting the form to the CodeIgniter controller

Can someone assist with my jQuery code? $(document).on("click", ".addthisone", function (e) { var file_data = $(this).parent().parent().parent().find('input[type=file]').prop("files")[0]; console.log(file_data); var form_data = new F ...

javascriptphpjquerycodeigniterform-data

Transmit data from the Windows Communication Foundation to JavaScript

Looking to invoke the WCF service through JavaScript, utilizing AJAX? Check out this resource: Calling WCF Services using jQuery Here's my query: Is there a method to retain some JavaScript-related data after making a request, and then transmit inf ...

javascriptajaxhtmlwcfservice

Adjusting the size of inline SVG elements on the fly

I'm working with an SVG that is being displayed inline like this: <div className="app-details__icon-large" dangerouslySetInnerHTML={{__html: svg }} />. I specifically need to render it this way (not using an img tag or as a background) in order ...

javascripthtmlcsssvg

What is the best way to delay a method in vue.js?

In the tab element called competences, there is an input field with the reference search. <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a @click="competencesTabClick" aria-controls="Company" aria-sel ...

javascriptvue.js

Inconsistencies observed in the functionality of window.location.reload(true)

I have been developing a feature for my website that automatically logs users out after a certain period of time. Within this functionality, I have incorporated the window.location.reload(true) method in three different sections of my code. Two of these in ...

javascriptjqueryreload

Is it acceptable to use JavaScript to code positioning if the standard HTML flow is not behaving as expected?

After contemplating for a long time, I have finally mustered the courage to ask this question. The behavior of HTML elements in normal flow has always bewildered me. Controlling them can be quite challenging, especially when dealing with server-side coding ...

javascripthtmlcss

How to make browsers refresh cached images

.button { background: url(../Images/button.png); } Issue: To improve performance, static content on the website is cached with expiration headers. However, when an image changes, users must manually refresh their browser cache (Ctrl+F5 in IE). ...

csscaching

eliminate odd gaps

Query: Is there a way to remove the space shown in the first image? Additional Information and Code: I am working on displaying a list of contacts one above the other. When a user hovers over a contact's name, a contact card appears with an email i ...

htmlcss

The blast.js example runs flawlessly on CodePen but encounters issues when run locally

I recently discovered blast.js and am encountering a problem when trying to run an example. The example functions perfectly on codepen, but fails to work on my local machine. The console is showing the following warning and error message. Any assistance fr ...

javascriptjquery

Issue with Firebase Storage: Invalid character detected in the string format 'base64'

I am currently developing a project using react-native and I am facing an issue with uploading an image to Firebase using Firebase Storage. To select the image from the phone, I am utilizing react-native-image-picker, which provides me with the base64 enco ...

javascriptandroidfirebasereact-nativefirebase-storage

Loading JQuery dynamically from an externally linked JavaScript file

Our clients can easily add a short script to their website to load our application. This script asynchronously loads the JavaScript that triggers the application on the client's page, typically as a pop-up. The launch code for the application requires ...

javascriptjquery

Unable to Call ZF2 Controller Function

I have been attempting to send a post value to the OrderController using ZF2. I have included JavaScript code in the view folder. Below are the codes: function submitHandler(form) { var urls = '<?php echo $this->baseurl; ?>/order/save ...

javascriptphpzend-framework2

Navigating through nested objects in JSON when working with D3: a guide

Currently, I am in the process of learning D3 using various tutorials. Here is the code snippet I have been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title ...

javascriptjsond3.jsesri

What could be causing my image to not load on my HTML page?

Why is the first image loading correctly but the second one isn't appearing? <p>Please insert an image from a random website:</p> <img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" h ...

htmlcss

Tips for creating unique names for JSON data modification functions

I have some data stored in JSON format that I need to slightly rearrange before sending it to the client. What should I name the function responsible for this reordering? Is serializeSomething a suitable choice? From what I understand, serialization invo ...

javascriptjsonserialization