Как увеличить родительский элемент при увеличении дочернего элемента?

Question

У меня есть два класса, и мне нужно, чтобы их элементы были одинаковой высоты.При увеличении высоты дочернего элемента его родительский элемент также нуждается в увеличении.

Класс родительского элемента .user-data, а класс дочернего элемента .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;
 }

Родительский и дочерний элементы должны иметь один и тот же класс, и я также не могу изменить свойство position в .user-data и .scheduleWorkingPeriodContainer из-за кода, не показанного здесь.

Может кто-нибудь помочь?

Answer 1

Как указано в этом другом ответе , вы не можете установить высоту родителя в соответствии с элементом с абсолютным позиционированием, если не используете фиксированную высоту или JavaScript.

---

В JavaScript вам просто нужно получить высоту вашего абсолютного позиционного дочернего элемента .scheduleWorkingPeriodContainer, а затем установить это значение в качестве высоты для вашего relative positioned родительского элемента .user-data.

---

Проверьте и запустите следующий Фрагмент кода для практического примера того, что я описал выше. В следующем фрагменте я изменил высоту родительского элемента на 5px больше, чем его absolute positioned дочерний элемент, чтобы вы могли видеть дополнительную высоту родительского элемента:

/* 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>