How do I increase parent element as child element is increased?

Question

I have two classes and I need to make their the elements same height. As the children element's height is increased, the parent element also needs its height to be increased.

Parent element class is .user-data and children element class is .scheduleWorkingPeriodContainer.

.user-data {
    position: relative;
    float: left;
    box-sizing: border-box;
    min-height: 40px;
    align-items: center;
    text-align: center;
    border-left: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    background-color: white;
}

.scheduleWorkingPeriodContainer {
    position: absolute;
    z-index: 1;
    width: 100%;
    display: block;
    overflow-x: hidden;
    height: auto;
 }

Parent and children element need to have same class and I also cannot change the position property in .user-data and .scheduleWorkingPeriodContainer due to code not shown here.

Can someone help?

does the child have to be position: absolute? – Brainmaniac Jan 19 '19 at 18:18 — Brainmaniac, Jan 19 '19 at 18:18

AndrewL64 · Accepted Answer · 2019-01-19T19:13:06.657

As stated in this other answer, you cannot set the parent's height according to an absolute positioned element unless you use fixed height or JavaScript.

With JavaScript, you just need to retrieve the height of your absolute positioned child element .scheduleWorkingPeriodContainer then set that retrieve value as the height for your relative positioned parent element .user-data.

Check and run the following Code Snippet for a practical example of what I described above. In the following snippet, I changed the parent element's height to be 5px more than it's absolute positioned child element so that you can see the extra height of the parent element:

/* JavaScript */

var child = document.querySelector(".scheduleWorkingPeriodContainer");
var parent = document.querySelector(".user-data");

parent.style.height = parseInt(window.getComputedStyle(child).height) + 5 + "px";

/* CSS */

.user-data {
    position: relative;
    float: left;
    box-sizing: border-box;
    min-height: 40px;
    align-items: center;
    text-align: center;
    border-left: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    background-color: green;
    width: 100%;
}

.scheduleWorkingPeriodContainer {
    position: absolute;
    z-index: 1;
    display: block;
    width: 100%;
    overflow-x: hidden;
    height: auto;
    background-color: red;
 }
 html, body {width: 100%;height: 100%; margin: 0; padding: 0;}

<!-- HTML -->

<div class="user-data">
  <div class="scheduleWorkingPeriodContainer"><p>ABCD</p><p>ABCD</p><p>ABCD</p><p>ABCD</p>
  </div>
</div>

How do I increase parent element as child element is increased?

1 Answers1